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?