Detecting AJAX activities in a web page

JavaScript
1

Hi All

I’m building an application that calculates the total price of items when adding them up and displays it in a particular div tag called “totalCost” using AJAX. But sometimes it might take long to calculate (due to server response time or something else) and that could annoy clients. I just want to detect when the AJAX takes long to display the new total price, so I can show a message like “Calculating, please wait…” or an image (a clock, sandglass, etc…) as an overlay.

Please, how do I do that in javascript?

Thanks in advance.

2

First solution is to always show the message “Calculating…” and to hide it when you get the response.

The second one is to show the message on some timeout (with setTimeout) for example 2 seconds if the result is not ready.

3

if you Ajax control use in your page then we just find in it to view its coding. also we know Ajax tool bar.

4

Here is my idea in pseudocode:

onClick:
  var showMessage = true;
  setTimeout('show', 20);
  $.post(
    onComplete(
      showMessage = FALSE;
      hideMessage();
    )
  );

function show(){
  if (showMessage){
     message.show();
  }
}

function hide(){
  if (showMessage){
     message.hide();
  }
}
5

Thanks for your response, Aquilax.
The 2nd solution you’ve given is the one I want. The thing is I am using jQuery-Ajax for this project so how do I do the setTimeout trick in it? Or even in traditional javascript Ajax how do I do that?

This is code:


function updateAvailableAttributes() {
	var form = document.forms["orderDefinition"];
	
	form.elements["formChangeRequest"].value = "true";
	$.ajax({
	  type: "POST",
	  url: "ajax/possibleValues.html",
	  data: $("form#orderDefinition").serialize(),
	  success: function(response){
	    $('#usercontent .sleeve .toprow').html(response);
	    applyValidation();
	  }
	});
	
// Show a waiting message
	$("#waitingMsg").ajaxStart(function(){
		  $(this).show();
	  }).ajaxStop(function(){
		  $(this).hide();
	 });
}