Display loading while webservice is running

Question

On the initial request to a page, I trigger a webservice and want to display a loading message. When the page has finished loading, I want to remove the waiting message from screen, but display it again when a change event in a checkbox triggers an Ajax call with another loading message.

This code is not behaving to the given spec:

$(document).ready(
    $(function() {
     $('#loadingDiv').hide();

      $('#productsDropDown')
         .change(function() {
            var prodValue = $(this).val();
            $('#proddate').load('getpdate.php', {prod: prodValue });
    }); 

    $('#loadingDiv')
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })    
    ;   
    });
);

what am I doing wrong?

Answer 1

You need to rearrange your code a bit, like this:

$(function() {
  $('#loadingDiv').hide();
  $('#productsDropDown').change(function() {
    var prodValue = $(this).val();
    $('#proddate').load('getpdate.php', {prod: prodValue });
  }); 

  $('#loadingDiv').ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $(this).hide();
  });
});

Currently you have this:

$(document).ready(
    $(function() {
    });
);

document.ready takes a function, you're passing it a jquery element. $(function() { }) is equivalent to wrapping it in $(document).ready(function() { }) already (see details here), no need to wrap it twice.

Answer 2

$(document).ready(function() {
    var loader = $('#loadingDiv');
    loader.hide();


    $('#productsDropDown').change(function() {
        var prodValue = $(this).val();
        loader.show();
        $('#proddate').load('getpdate.php', {prod: prodValue }, function() {
            loader.hide();
        });
    });
);