jQuery UI Sortable: отменить изменения, если update callback делает вызов AJAX, который завершается неудачей?


Я использую сортируемый виджет для повторного заказа списка элементов. После того, как элемент перетаскивается в новое место, я запускаю запись формы AJAX на сервер, чтобы сохранить новый заказ. Как я могу отменить сортировку (например, вернуть элемент перетаскивания в исходное положение в списке), если я получаю сообщение об ошибке от сервера?

В принципе, я хочу, чтобы повторный заказ "застрял", если сервер подтвердит, что изменения были сохранены.

3 21

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 */
         }
});
Хотя хотелось бы знать, есть ли у других лучший ответ.

Попробуйте следующее:

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

Я только что столкнулся с этой же проблемой, и ради полного ответа я хотел поделиться своим решением этой проблемы:

$('.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);
        }
      },
    });
  }
});

Вам нужно будет изменить его в соответствии с вашей кодовой базой, но это полностью многопоточное безопасное решение, которое очень хорошо работает для меня.