SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    if else - xmlhttp - novice

    Hi all, I've created a simple dropdown which activates the below code showing user details from my DB. The problem is that I'm getting 0.4-1sec delay between changes and need to add my loading.gif just to give the user some feedback.

    How and where do I add - else load (images/loading.gif) until the content is ready.

    Code JavaScript:
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
        }

    Much appreciated thank you
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Just always show the loading image when making the request, and on success remove it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pmw57

    yes I understand how it should work, just don't know how to code it

    Code JavaScript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    else (images/loading.gif)
    ???

    Thanks Barry
    The more you learn.... the more you learn there is more to learn.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The else clause is a mistake. That part is no good for you.

    In the if statement, you would remove the loading image.
    After the send part, you would add the loading image.

    Code javascript:
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            // remove loading image here
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    // add loading image here
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying to add images/loading.gif at the end of the code?

    Code JavaScript:
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    images/loading.gif

    Thanks
    The more you learn.... the more you learn there is more to learn.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Are you saying to add images/loading.gif at the end of the code?
    I'm saying that when you send the AJAX request, that you should always show the loading image at that stage.

    Then later on when the data has been successfully received (in the if statement) that you should then remove (or replace) the loading image from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul thanks for your help.
    The more you learn.... the more you learn there is more to learn.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, Ive been trying to find an example of how this should be put together, no such luck

    Would it be possible to show me in the code how all this should fit together?
    Still learning js thanks.

    Barry
    The more you learn.... the more you learn there is more to learn.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Something like this could be all that you need:

    Code javascript:
    document.getElementById("txtHint").innerHTML='<img src="images/loading.gif">';

    The txtHint area (and the loading image) then gets automatically replaced when the successful info comes through.

    Don't forget that the above should be placed outside of the if statement. It should be placed near where you send the ajax request.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul.
    I'll have a play around with the code and let you know how i get on cheers.

    Barry
    The more you learn.... the more you learn there is more to learn.

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to be working.
    Bit more of a delay now that I've added the image, but might be the wireless.
    How does the code look to you?
    Should we be repeating document.getElementById("txtHint") ?

    Code JavaScript:
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
        document.getElementById("txtHint").innerHTML='<img src="images/loading.gif">';
        }

    Thanks again.
    The more you learn.... the more you learn there is more to learn.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Seems to be working.
    Bit more of a delay now that I've added the image, but might be the wireless.
    You can always have your web page cache the image by loading the image first before it's needed. Such as, loading it in to a hidden element, or to one that's offscreen, or even just scripting the creation of an image object as the page loads.

    Quote Originally Posted by computerbarry View Post
    Should we be repeating document.getElementById("txtHint") ?
    Yes, since ther's no realistic way to obtain a reference to it from within the event. The only ways around that are to create a function that returns the target element, or to place the target element in a global variable so that you can reference that variable from both places.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was the wireless, everything back to normal now cheers might keep the preload image in mind, works quite well with text (loading...)

    Thanks for the explanation about txtHint might be best to keep what we've got for now than create another function, I'm sure this will all fit together as I learn more.

    Also just come across the console in firebug, getting some useful information back

    That's me for the night and thanks again Paul, hopefully chat soon with some other coding issues.
    The more you learn.... the more you learn there is more to learn.

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One small issue if anybody can help?

    How do I add a jquery transition to XMLHttpRequest?
    You can see I've added a click function below, no errors but no transition is working, any ideas?
    I also have the jquery lib above this thanks.

    Code JavaScript:
    function showUser(str)
        {
        if (str=="")
          {
          document.getElementById("txtHint").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
        document.getElementById("txtHint").innerHTML='<p style="text-align:center; padding-top:10px">loading...</p>';
     
        $("option").click(function() {
    		var txtHint = $(this).find("ul").attr("user_box"); //Find the rel attribute value to identify the active tab + content
    		$(txtHint).fadeIn(); //Fade in the active content
    		return false;
    	});
        }

    Thank you
    The more you learn.... the more you learn there is more to learn.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    How do I add a jquery transition to XMLHttpRequest?
    You may have to put a test web page up on the internet, so that we can see what is currently being done, and in the context of that work out how to achieve what you're wanting to do.
    Last edited by paul_wilkins; Jan 3, 2011 at 17:48.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul
    I'll have to try and get something uploaded tomorrow bit late now and everything is running locally.

    Thanks again, Barry.
    The more you learn.... the more you learn there is more to learn.


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
  •