Method for disabling a jquery sortable while awaiting an ajax update?

I have a jquery sortable with an ajax callback tied to the update event. The ajax callback sends the updated sort order back to the server and then does a refresh of the sortable to guarantee that the client and server are both in sync.

The problem I am having is that the user can start a new sortable event before the ajax call has completed - I'd like to prevent that.

What I did try doing was disabling the sortable on the update event, and then re-enabling it when the ajax call returned. However unless I messed up the sequence, this didn't seem to work - I can still start a new sortable drag while the ajax call is still active.

Is there any other way to prevent this? I 开发者_如何学Ccan certainly set a global javascript variable that says, "hey not right now, I'm ajaxing..." and reference it, but I'm not sure what sortable event would check for this, or how it would kill the sortable click request.

Thoughts?

For a better user experience...

Instead of disabling the interface, you should cancel the previous ajax request so that it doesn't overwrite any new requests.

This keeps the interface responsive, fluid and flexible. It allows the user to 'change their mind' and reorder the list while waiting for it to save. Any old requests are cancelled and therefore don't overwrite new requests...

    //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
                }
            });
        }
    });

You can simply overlay a transparent absolutely-positioned div over the whole list, which will prevent any clicks/drags on the list.

Set it in your CSS to display: none. Then, when you initiate an AJAX call, set it to display: block, and when your AJAX call completes, switch it back to display: none.

Did you try to set the disabled property ?

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

And then after the ajax request

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