SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using AJAX i need to load image in the background untill the real content displayed

    HI

    Iam new to this forum. I dont have any idea of AJAX. But now I want to make use of ajax in my program.

    My Task is as follows:


    Each module should load separately from the others, i.e. each module should load in the background. While loading, in the space where the module will appear, a loading image should be displayed. This loading should be done via .
    AJAX. When the module has fully loaded, the module HTML should replace the image. This should happen for each module. Each module should also auto-refresh every 3 minutes. This re-load should occur in the background and when each module has fully loaded the HTML of that module should be replaced by the new HTML. Each module should reload independently of all other modules.

    Iam helpless in this regard. I need your help.

    Thanx for the help on advance.

    Regards
    janakiraman

  2. #2
    winter is around the corner Tomer's Avatar
    Join Date
    Jul 2005
    Location
    Israel
    Posts
    684
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's very easy to do. I also just started with AJAX, but I think I can help you.

    Javascript File
    Code:
    function createXMLHttpRequestObject() {
        var ro;
        var browser = navigator.appName;
        if (browser == "Microsoft Internet Explorer"){
            ro = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            ro = new XMLHttpRequest();
        }
        return ro;
    }
    
    var http = createXMLHttpRequestObject();
    
    function handleResponse() {
        if(http.readyState == 4){
    		document.getElementById("status").innerHTML = '';
    		document.getElementById("result").innerHTML = '';
            document.getElementById("result").innerHTML = http.responseText;
        }
        else
        {
    		document.getElementById("result").innerHTML = '';
    		document.getElementById("status").innerHTML = 'LOADING BACKGROUND HTML';
        }
    }
    
    function openPage(page) {        
        http.open('get', page);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
    OK so that's your JS. Now for the HTML file

    HTML Code:
    <a href="javascript:openPage('url.html');">Open page</a>
    <div id="status"></div>
    <div id="result"></div>
    Try that out dude.
    - Tomer

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanx for your help. What i did is i copied the whole code into a file and named as url.html. when i ran this whole script i couldn't find anything. when i ran the html content and js file seperately, i couldn't find anything. How to make use of the above script as iam not sure of where to exactly place these two script.

    Your help is greatly appreciated.

    Thanx

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    when i ran the script iam getting like this. Is this correct.
    Open page
    LOADING BACKGROUND HTML

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    when i ran the script iam getting like this. Is this correct.
    Open page (a link url.html) when i click on this iam getting
    " LOADING BACKGROUND HTML".

    Iam also getting an js error on line http.open("GET",page,true); It is saying type mismatch. what should i pass for the url. here you have specified page.
    Iam not sure of the expected result. Is this the expected result or... where to add the background image which will be displayed untill the real image is being displayed.where to add the real image content.

    Please help me in this regard.

    Thanx


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
  •