Question

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 can 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?

Answer 1

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.