jQuery ui sortable loading indicator

Question

Hello. I'm using this code:

$(document).ready(function() {
    $("#test-list").sortable({
      handle : '.handle',
      update : function () {
       var order = $('#test-list').sortable('serialize');
     $("#info").load("process-sortable.php?"+order);
      },
    });
});

I want a loading indicator (GIF animation if possible) to show up when I drop the item and the request is being sent to the server until the PHP request is done and load is succesful.

How can I do this ?

Thanks.

Answer 1

Show the image in the update function before you start the ajax-call, make a callbackfunction for the load and hide the image there (so after the ajax-call is done)