jQuery UI Sortable：如果更新回調使得AJAX調用失敗，還原更改？

我正在使用可排序的小部件重新排列項目列表。將項目拖到新位置後，我將AJAX表單帖子啓動到服務器以保存新訂單。如果我收到來自服務器的錯誤消息，如何撤消排序（例如，將拖動項目返回到列表中的原始位置）？jQuery UI Sortable：如果更新回調使得AJAX調用失敗，還原更改？

基本上，如果服務器確認所做的更改已保存，我只想要重新排列「粘貼」。

來源

2010-04-23 Seth Petry-Johnson

我敢肯定，可排序沒有任何撤銷 - 最後一滴功能 - 但這是一個好主意！同時，我認爲你最好的選擇是寫一些start來存儲順序，然後在失敗時調用一個回覆函數（012）。即像這樣：

$("list-container").sortable({ 
    start: function() { 
      /* stash current order of sorted elements in an array */ 
     }, 
    update: function() { 
      /* ajax call; on failure, re-order based on the stashed order */ 
     } 
});

想知道別人是否有更好的答案，但。

來源

2010-04-23 16:39:15 brahn

我只是在頁面加載時初始化整個排序，並將其填入變量以保持安全。在ajax保存成功之後，我將克隆變量替換爲最新的可排序（再次克隆）。出錯時，我用克隆替換排序（並將其重新初始化爲可排序）。似乎到目前爲止工作還行...... – Ryan 2013-04-16 16:01:52

請問您可以發佈這個答案，以便它可以upvoted？ :) – 2015-07-06 22:31:39

嘗試以下操作：

$(this).sortable('cancel');

來源

2010-11-18 15:11:37 thyphus

這工作對我來說，雖然我一次發佈一個更新。 – Joe 2011-08-02 23:36:42

ajax通常是異步的，所以爲了實際工作，您必須等待/睡在可排序的ajax請求的beforeStop方法中，可能是通過將jquery請求上的async設置爲false。 – Ryan 2013-04-16 15:39:23

@Ryan我使用'$ elem.sortable（'cancel'）'來排除UI排序，如果後端未能保持更改並且它剛剛工作。似乎'取消'撤消了最後一次修改**對項目的安排，不管已經過了多少時間（除非一次刷新頁面或其他東西）。 – 2016-04-16 19:55:37

我只遇到過同樣的問題，而對於一個完整的答案的緣故，我想分享我的解決了這個問題：

$('.list').sortable({ 
    items:'.list:not(.loading)', 
    start: function(event,ui) { 
    var element = $(ui.item[0]); 
    element.data('lastParent', element.parent()); 
    }, 
    update: function(event,ui) { 
    var element = $(ui.item[0]); 
    if (element.hasClass('loading')) return; 
    element.addClass('loading'); 
    $.ajax({ 
     url:'/ajax', 
     context:element, 
     complete:function(xhr,status) { 
     $(this).removeClass('loading'); 
     if (xhr.status != 200) { 
      $($(this).data('lastParent')).append(this); 
     } 
     }, 
    }); 
    } 
});

你」您需要修改它以適應您的代碼庫，但這是一個完全適用於我的多線程安全解決方案。

來源

2012-02-27 06:11:48

謝謝！幫了我一噸！ – 2012-12-15 22:24:05

謝謝！偉大的一段代碼。即插即用！ :) – gabn88 2015-07-30 10:03:18

jQuery UI Sortable：如果更新回調使得AJAX調用失敗，還原更改？

回答

相關問題