通過ajax更新元素：我應該使用全局變量來保持元素的ID還是壞習慣？

Question

在頁面上我有一個我想通過AJAX進行編輯的日期列表。

實施例：

<li>January 2015<a data-update_url="/frame_date/22/update/" class="update" id="update_framedate_22" href="javascript:void(0)">Edit</a> 

當編輯鏈路上的用戶點擊，我趕元件id和修改鏈接。

比AJAX從服務器請求更新表單。現在我必須放置表單而不是帶有提到的ID的元素。

換句話說，在frame_date_update_show_get我需要元素的ID。在下面的例子中，我將它保存在全局變量date_id中。但在我內部有一個抗議：我總是被教導說全局變量是一個不好的習慣。但在這種情況下，我不知道如何在沒有全局變量date_id的情況下相處。

您能否給我一些建議：我的代碼是否可以接受，或者有更好的方法來解決問題。

function frame_date_update_show_get(data){ 
    $("#" + date_id).replaceWith(data); 
} 

function frame_date_update_get_data(){ 
    date_id = this.getAttribute('id') 
    var cuaghtUrl = this.getAttribute('data-update_url'); 

    $.ajax({ 
     method: 'get', 
     url: cuaghtUrl, 
     success: frame_date_update_show_get, 
     error: fail 
    }); 
} 

var date_id = "" 

Answer 1

可以使用匿名函數是成功的回調函數，然後調用frame_date_update_show_get與附加date_id參數：

function frame_date_update_show_get(data, date_id) { 
 
    $("#" + date_id).replaceWith(data); 
 
} 
 

 
function frame_date_update_get_data() { 
 
    var date_id = this.getAttribute('id') 
 
    var cuaghtUrl = this.getAttribute('data-update_url'); 
 

 
    $.ajax({ 
 
    method: 'get', 
 
    url: cuaghtUrl, 
 
    success: function(data) { 
 
     frame_date_update_show_get(data, date_id); 
 
    }, 
 
    error: fail 
 
    }); 
 
}

Answer 2

我會用contenteditable結合AJAX是這樣的：

function dateChange(options){ 
 
    switch(options.action) { 
 
     case 'update': 
 
     \t if(options.id && options.text && options.updateUrl) { 
 
      \t $.ajax({ 
 
        method: 'post', 
 
        url: options.updateUrl, 
 
        data: { 
 
         id: options.id, 
 
         html: options.text 
 
        }, 
 
        success: function(response) { 
 
         options.element.html(response); 
 
         options.element.removeClass('editing'); 
 
        }, 
 
        error: function(err) { 
 
         console.log('request failed: ' + err.text); 
 
        } 
 
       }); 
 
      }; 
 
      break; 
 
     default: 
 
     \t console.log('action invalid'); 
 
      return false; 
 
      break; 
 
    }; 
 
}; 
 
var editTimeout = null; 
 
$('li[data-update-url]').on('input', function(e) { 
 
    var thisText = $(this); 
 
    thisText.addClass('editing'); 
 
    clearTimeout(editTimeout); 
 
    editTimeout = setTimeout(function() { 
 
    \t var updateUrl = thisText.data('updateUrl'); 
 
     var id = thisText.data('id'); 
 
     dateChange({ 
 
      'action': 'update', 
 
      'element': thisText, 
 
      'id': id, 
 
      'updateUrl': updateUrl, 
 
      'text': thisText.html() 
 
     }); 
 
    }, 1000); 
 
});

.editing { 
 
    color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li data-update-url="/echo/html/" data-id="update_framedate_22" contenteditable>January 2015</li> 
 
</ul>

檢查它是如何工作的JSFiddle。

此代碼將很容易擴展，您可能需要的其他操作如delete,add。