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调用失败，还原更改？

回答

相关问题