Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Loading icon - when should it be displayed

    OK, I'm an AJAX newbie, and I just had a quick question.

    My goal is to have a loading icon appear and disappear while an xmlhttprequest is being executed. My question is, when should I make the loading icon appear and disappear. I know this may seem trivial, but I just wanted to clarify the timeline of an AJAX request.

    Should its dis/appearance be dependent on ready state changes, or should it bet dependent on when functions are executed?

    When should I make the div which contains the loading icon visible?
    a. When the open() function is invoked
    b. When the send() function is invoked
    c. When the readystate changes to 2
    d. When the readystate changes to 3

    I assume I should make it disappear when the readstate changes to 4, but is that correct?

    Sorry for the barrage of questions, just wanted to get some clarity on this.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    if (readystate!=4)
    // show the loading icon
    else if(readystate==4)
    // hide the loading icon
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    48
    Thanks
    4
    Thanked 1 Time in 1 Post
    Also an AJAX newbie here.....

    I'm using something like this to implement the info. that was just retrieved. I assume that it will check the readyState as it moves through each value up to when it ==4?

    Code:
    xmlHttp.onreadystatechange=function()
     {
       if (xmlHttp.readyState!=4)
         // show the loading icon
    
       else if(xmlHttp.readyState==4)
        {
           // hide loading icon
           do something;
        }
     }
    Last edited by broncozr; 01-01-2009 at 04:05 PM.

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm doing the above but i've got an issue. I'm trying to have a button to show comments about a news article, so when the user clicks "Show Comments" it shows the loading image and then the comments, which is fine. However if I then click to see another new stories comments the previous one just displays the loading image and removes the comments that where there.

    The code is:
    Code:
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    		{
    			//mystr completes the div id e.g. comments2 or comments3 etc. 
    			txtloc = "comments" + mystr;
    			document.getElementById(txtloc).innerHTML = xmlHttp.responseText;
    		}
    else
    		{
    				document.getElementById(txtloc).innerHTML = "<img src='images/loading.gif' />";
    		}
    Sorry if this is a stupid mistake on my part but I'm baffled!

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    It is because you are replacing the innerHTML.

    If you do not want to remove the data, you need to find a new way to add the image to the page. Your best bet would be to hardcode the image tag on the page and set it to hidden. When you need it to show you set it to be visible.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

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