SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Displaying a loading activity indicator gif animation for my Ajax call

    I am also trying to achieve , displaying a loading activity indicator gif till the server (JSP) processes the validation work for my Ajax call.

    Below is my code:

    Code:
        var httpRequest = newXMLHttpRequest();
         
          //Show loading activity indicator gif
    		showLoadingImg();     
             
          try
          {
             httpRequest.open("GET", url, true);
            //  httpRequest.open("GET", url, false);  // This line was the actual bug
            httpRequest.onreadystatechange = function() {processRequest
    
    (httpRequest); } ; 
            httpRequest.send(null);
          }
    where in my call back function :

    Code:
    function processRequest(httpRequest) 
        { 
          if (httpRequest.readyState == 4) 
            { 
                if(httpRequest.status == 200) 
                { 
                   // use data obtained from server
     
                  //hiding loading activity indicator gif
                  hideLoadingImg();
    					
            	return true;
    	     }
    	}
       }
    Where my loading activity indicator related code are :

    Code:
    function showLoadingImg(){
         var loadingDiv = window.self.frames[2].document.getElementById("modal-
    
    login-wait");
         loadingDiv.style.display = "block";   // show
        		var msg = "Validating...";
        //		msg += "<br>";
       // 		msg += "<img src='images/loading.gif' alt='loading..' />";
             loadingDiv.innerHTML = msg;
    //	loadissssngDiv.style.visibility = "visible";
    
    }
    function hideLoadingImg(){
         var loadingDiv = window.self.frames[2].document.getElementById('modal-
    
    login-wait');
          loadingDiv.style.display = 'none';   // hide
          loadingDiv.innerHTML = "";
    In above showLoadingImg() function when I uncomment the line in red

    (which actually gives an error 'loadissssngDiv' is undefined),
    I am able to see actual display as "Validating..." along with the gif image.

    But if that red part is commented (which should be), I am not seeing the

    desired display of the loading..


    And below is the code how I am creating the div dynamically when required:

    Code:
    //This function creates the divs dynamically
    
    function afunction(){
    //some other dynamically elements are created here
     var contentFrame = window.self.frames[2];
      var modalLoginDiv = contentFrame.document.createElement("div");
    
     var aniLoadingDiv = animateLoading(contentFrame);
       modalLoginDiv.appendChild(aniLoadingDiv);
       
       contentFrame.document.body.appendChild(modalLoginDiv);
       return true;
    }
    
    
    
    function animateLoading(frame){
      var contentFrame = frame;
      var loadingDiv = contentFrame.document.createElement("div");
    	loadingDiv.id='modal-login-wait';
        loadingDiv.style.display = "block";
    	loadingDiv.style.position ="relative";
    	loadingDiv.style.top="20px";
    	loadingDiv.style.left="120px";
    //	loadingDiv.style.zIndex="11";
    //	loadingDiv.style.visibility = "visible";
    
     //   var loadingImg = createLoadingImg(contentFrame);
    //    alert("creating loadingDiv = "+loadingDiv);
    //    loadingDiv.appendChild(loadingImg);
       
    	return loadingDiv;
    }

    There is no single error in my code, everything works

    fine..
    my contents successfully validates in server and I get the success messages

    and so on..


    The only thing I am not able to see the loading gif functionality..
    But as I said..

    If I put an alert message in function showLoadingImg()
    or the make the red line uncomment (making the line a error),
    Then I am getting the loading gif functionality work..

    But, all next functions fail due to above red lined error (if its

    uncommented).

    I forgot to mention. I am coding it in frame based environment.


    Please suggest..
    Last edited by donsarkar; Mar 5, 2009 at 11:18. Reason: updated

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It could be that the result is coming back from the server before the browser has time to set up the animated GIF. Make the server script sleep for a few seconds before returning the result to see if it displays the image.

  3. #3
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird View Post
    It could be that the result is coming back from the server before the browser has time to set up the animated GIF. Make the server script sleep for a few seconds before returning the result to see if it displays the image.

    Yes, I am making sure that the jsp running sleeps by putting the thread to sleep for 4-5 secs.
    But still no success..

    I wonder same code works, when I make any kind of error (intentionally though)..

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    After the loading image has been displayed, you may need to use setTimeout to kick off the rest of the process. This will give the browser the opportunity to show and display the loading image.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea of making the response slower just to display an animation rubs me the wrong way. Is there normally a noticeable wait for the validation process to return?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If there is no significantly noticeable wait then a loading image won't be required. That one is required for the purpose of validation is worrisome.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    After the loading image has been displayed, you may need to use setTimeout to kick off the rest of the process. This will give the browser the opportunity to show and display the loading image.

    The image don't display at all in normal flow.. not even the "Validating.." text also come up..

    In other uses I have seen there is no need of setTimeout.. is this a necessity here.. to refresh the function calling using setTimeOut ?

  8. #8
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird View Post
    The idea of making the response slower just to display an animation rubs me the wrong way. Is there normally a noticeable wait for the validation process to return?
    Actually the server in normal condition takes 1-2 seconds for the processing max.
    But I just want to implement the functionality for the look and feel and for my understanding of the concept..

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I think that the onreadystatechange part of the code may be causing the problem.

    What normally occurs is that the loading image is displayed, and the onreadystatechange is set. End of scripting.

    Then the web browser has the opportunity to show the loading image.

    Instead of doing a setTimeout, the onreadystatechange performs a similar job. It just waits around for the state of the request to change, and when the state has changed to a state of 4, that's when your scripting should carry on and remove the loading image then carry on with the processing.

    Anyway, check out the bulletproof ajax code for Chapter 6, the one for Feedback - People
    That one demonstrates how a loading image is used with ajax.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its now Solved!

    Here in below code, the bug was in the red lined code.

    Code:
       try
          {
             httpRequest.open("GET", url, true); //This solved my error
             // Below line was the actual bug
            //  httpRequest.open("GET", url, false);  
            httpRequest.onreadystatechange = function() {processRequest
    
    (httpRequest); } ; 
            httpRequest.send(null);
          }

    I was trying to make the ajax call as synchronous previously, by setting the third parameter to 'false' in the open() method.

    (Thinking in mind that, until the validation happen browser should wait till that time, but I was wrong.. asynchronous works too).

    And there was the actual bug.
    Making the parameter set to 'true', i.e making ajax call to real asynchronous, solved my bug.
    Now every thing is working fine. I am getting "Validating..." along with the image showing up till response returns from server.



    Thanks you guys for your time and suggestions.

  11. #11
    SitePoint Member
    Join Date
    Feb 2009
    Location
    Atlanta, GA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    .............

    Instead of doing a setTimeout, the onreadystatechange performs a similar job. It just waits around for the state of the request to change, and when the state has changed to a state of 4, that's when your scripting should carry on and remove the loading image then carry on with the processing.
    Yes, you are true.
    We don't need setTimeOut method.

    onreadystatechange is frequently get called.
    Even it checks for "readyState" status code frequently and should update browser for changes.

    But with me, 'readyState' only working for value '1' when put in different if conditions like below:

    Code:
     if(httpRequest.readyState == 1) { 
      stausMsgDiv.innerHTML = "<span style='color: red;'>Sending request.. Please wait..</span>";
    //alert("Sending request.. Please wait..");
    }
     if(httpRequest.readyState == 2){
      stausMsgDiv.innerHTML = "<span style='color: red;'>Request has been sent.. Please wait..</span>";
    //alert("Request has been sent.. Please wait..");
    }
     if(httpRequest.readyState == 3){
       stausMsgDiv.innerHTML = "<span style='color: aqua;'>Validating your id..  Please wait..</span>";
    //alert("Validating your id.. Please wait..");
    }
    'readyState' for value '2' and '3' are not updating.. the innerHtml content.
    but if you uncomment the 'alert' in all above code, each if condition is successfully validating.. and each alert message shows.

    So what could be the situation in above case ??
    Any thought ?

    my Goal is to update the message as the 'readyState' changes its code.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The following is from the Bulletproof Ajax book, on pages 56-57

    READYSTATE
    The readyState property indicates the current state of an Ajax request. Its
    value is numerical:

    • 0 Uninitialized. The open method hasn’t been called yet.
    • 1 Loading. The open method has been called, but the send method hasn’t.
    • 2 Loaded. The send method has been called. The request has begun.
    • 3 Interactive. The server is in the process of sending a response.
    • 4 Complete. The server has finished sending a response.


    Every time the value of readyState changes, the readystatechange event
    is triggered. If a function has been assigned to the onreadystatechange
    event handler, it will be executed every time readyState changes value.

    In theory, the value of the readyState property will change in numerical
    order from 0 to 4. In practice, the order in which readyState changes varies
    from browser to browser. Still, every browser finishes with a readyState
    value of 4 when the request is completed.

    Rather than trying to do anything clever with the changing readyState property,
    it’s best just to wait until its value has reached 4. Then you know the
    server has finished sending a response.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •