Display loading while webservice is running
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:
<pre>
$(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();
	    })    
	;	
	});
);

</pre>

what am I doing wrong?
Display loading while webservice is running
===

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:
<pre>
$(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();
	    })    
	;	
	});
);

</pre>

what am I doing wrong?