SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting AJAX activities in a web page

    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. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Sofia, Bulgaria
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you Ajax control use in your page then we just find in it to view its coding. also we know Ajax tool bar.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Sofia, Bulgaria
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my idea in pseudocode:

    Code:
    onClick:
      var showMessage = true;
      setTimeout('show', 20);
      $.post(
        onComplete(
          showMessage = FALSE;
          hideMessage();
        )
      );
    
    function show(){
      if (showMessage){
         message.show();
      }
    }
    
    function hide(){
      if (showMessage){
         message.hide();
      }
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •