jQuery UI Sortable: отменить изменения, если update callback делает вызов AJAX, который завершается неудачей?
Я использую сортируемый виджет для повторного заказа списка элементов. После того, как элемент перетаскивается в новое место, я запускаю запись формы AJAX на сервер, чтобы сохранить новый заказ. Как я могу отменить сортировку (например, вернуть элемент перетаскивания в исходное положение в списке), если я получаю сообщение об ошибке от сервера?
В принципе, я хочу, чтобы повторный заказ "застрял", если сервер подтвердит, что изменения были сохранены.
3 ответа:
Я почти уверен, что sortable не имеет функции отмены последней капли - но это отличная идея!
В то же время, я думаю, что лучше всего написать какой-то
start
, который хранит порядок, а затем при сбое вызвать функцию возврата. То есть что-то вроде этого:Хотя хотелось бы знать, есть ли у других лучший ответ.$("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 */ } });
Я только что столкнулся с этой же проблемой, и ради полного ответа я хотел поделиться своим решением этой проблемы:
$('.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); } }, }); } });
Вам нужно будет изменить его в соответствии с вашей кодовой базой, но это полностью многопоточное безопасное решение, которое очень хорошо работает для меня.