Блог

У меня есть сортировка jquery с обратным вызовом ajax, привязанным к событию обновления. Обратный вызов ajax отправляет обновленный порядок сортировки обратно на сервер, а затем выполняет обновление сортировки, чтобы гарантировать, что клиент и сервер синхронизированы.

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

Что я пытался сделать, так это отключить сортировку при событии обновления, а затем снова включить ее, когда вызов ajax вернулся. Однако, если я не перепутал последовательность, это, похоже, не сработало — я все еще могу запустить новое сортируемое перетаскивание, пока вызов ajax все еще активен.

Есть ли какой-либо другой способ предотвратить это? Я, конечно, могу установить глобальную переменную javascript, которая говорит: «Эй, не сейчас, я подключаю ajax …» и ссылаться на нее, но я не уверен, какое событие сортировки будет проверять это или как оно уничтожит запрос на сортировку.

Мысли?

Для лучшего взаимодействия с пользователем…

Вместо отключения интерфейса вы должны отменить предыдущий запрос ajax, чтобы он не перезаписывал новые запросы.

Это позволяет адаптивному, гибкому и гибкому интерфейсу. Это позволяет пользователю «передумать» и изменить порядок списка в ожидании его сохранения. Все старые запросы отменяются и, следовательно, не перезаписывают новые запросы…

     //keep track of ajax request to allow cancellation of requests:
    var ajaxRequest = null;

    $('ul.sortable').sortable({
        containment: 'parent',
        update: function (event, ui) {

            //display your loading anim gif

            //get list of ids in correct order:
            var ids = $(this).sortable('toArray').toString();

            //cancel any previous ajax requests:
            if (ajaxRequest) {
                ajaxRequest.abort();
            }

            //post order to web service:
            ajaxRequest = $.ajax({
                type: 'POST',
                url: 'somewebservice.blah',
                data: ids,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    //saved ok:
                    ajaxRequest = null;

                    //hide your loading anim gif
                }
            });
        }
    });
  

Вы можете просто наложить прозрачный абсолютно позиционированный div на весь список, что предотвратит любые щелчки / перетаскивания по списку.

Установите для него в вашем CSS значение display: none . Затем, когда вы инициируете вызов AJAX, установите для него значение display: block , а когда ваш вызов AJAX завершится, переключите его обратно на display: none .

Вы пытались установить свойство disabled?

 $('#sortable').sortable('option', 'disabled', true )
  

А затем после запроса ajax

 $('#sortable').sortable('option', 'disabled', false )