Способ отключения сортировки JQuery в ожидании обновления AJAX? - PullRequest
Новая
       0

Способ отключения сортировки JQuery в ожидании обновления AJAX?

2 голосов
/ 03 октября 2011

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

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

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

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

Мысли?

Ответы [ 3 ]

3 голосов
/ 07 августа 2012

Для лучшего пользовательского опыта ...

Вместо отключения интерфейса следует отменить предыдущий запрос 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
                }
            });
        }
    });
2 голосов
/ 03 октября 2011

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

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

1 голос
/ 03 октября 2011

Вы пытались установить отключенное свойство? 

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

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

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