SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Ajax Help

    Hey guys,

    I've just recently started getting my feet wet with Ajax and have a quick question. It seems like it should be fairly simple so hopefully someone can help.

    I have this function that loads dynamic content into a div element:

    Code:
    function makerequest(serverPage, objID)
    {
    	var obj = document.getElementById(objID);
    	xmlhttp.open("GET", serverPage);
    	xmlhttp.onreadystatechange = function() {
    		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    		{
    			obj.innerHTML = xmlhttp.responseText;
    		}
    	}
    xmlhttp.send(null);
    }
    The xmlhttp object is an ajax object created elsewhere in the code.

    Basically what I am wanting to do is modify this so that while it's waiting for the external page to load it displays a standard style loading gif in the destination div element.

    I've been programming php for a long time so I have an idea of how I would do it in php, but I've unfortunately neglected javascript so the syntax is still somewhat foreign to me, (although I'm learning more everyday ).

    Anyway if someone could help that would be great.

    thanks,

    Chris

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simply show the animated gif at the same time that you call the makerequest function. Then hide it when the request is done (inside the if).

  3. #3
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.

    I'm not sure I really understand how to do what you are saying. If you could help with showing me how you would go about it with code, that would be helpful. I mean it sounds easy enough but I guess I'm missing exactly how to do it.

    thanks again,

    Chris

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have an animated gif in the HTML. Set it to be hidden (Use the display property). Give the image an id so that you can access it using getElementById.

    You can simply change the CSS display property once you have a reference to the image. When your ajax request is called, then show the image by changing the display property. Once the request is done you change it back to what it was initially.

    Read up on these stuff in the links above. They should give you a good understanding on how to do this.


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
  •