How to show jQuery is working/waiting/loading ?

Question

How do I show a loading picture and/or message to the user ? If possible, would I like to know how to make it full screen with grey-dimmed background. Kinda like when viewing the large picture from some galleries (sorry, no example link).

Currently do I add a CSS class which has the image and other formating, but its not working for some reason. Results from the search do get inserted into the div.

HTML

<div id="searchresults"></div>

CSS

div.loading {
  background-image: url('../img/loading.gif'); 
  background-position: center;
  width: 80px;
  height: 80px;
}

JS

$(document).ready(function(){
  $('#searchform').submit(function(){
    $('#searchresults').addClass('loading');
    $.post('search.php', $('#'+this.id).serialize(),function(result){
      $('#searchresults').html(result);
    });
    $('#searchresults').removeClass('loading');
    return false;
  });
});

Answer 1

Your problem is that you are calling removeClass('loading') immediately after you issued ajax call, not after it is finished.

You could do removeClass('loading') in ajax callback. $.post allows to provide only success callback:

jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )

And loading picture should be removed in any case - succes or failure, so it is better to use complete callback of $.ajax():

$('#searchform').submit(function(){
  $('#searchresults').addClass('loading');

  $.ajax({
    type: 'POST',
    url: 'search.php',
    data:  $('#'+this.id).serialize(),
    success: function(result){
      $('#searchresults').html(result);
    },
    complete: function() {
      $('#searchresults').removeClass('loading');
    }
  });
  return false;
});

See more about callbacks in "Callback Functions" section in $.ajax() docs

Answer 2

Try this:

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

This will display #contentLoading which is my progress gif when I start an ajax and hide it when ajax stops.