1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

AJAX: Page loading, please wait ...

Discussion in 'JavaScript' started by stats, Jul 19, 2007.

  1. #1
    Hi

    I never had any experience with ajax but i guess what i want to do is to be done with ajax. Please help

    here's the problem

    i have a php page structured like this

    <html begining here>
    <php search code here>
    <html ending here>

    the php code on my page takes long to complete execution and give results, because of that the whole page may take up to 40 seconds to load which is not acceptable because the visitors will navigate away

    so now i want something that will show a message like "Please wait while the search is complete" in the place of the php code while it is still loading, and then change to the results of the PHP once the search is done

    please be as specific with syntax as you can, because i never wrote an ajax code before.

    Thanks!!
     
    stats, Jul 19, 2007 IP
  2. aRo`

    aRo` Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i dont know exactly what you want to do but i recently wrote how you can do an ajax call without a framework.

    Instead of clicking on the link you should adjust the code so that the ajax call is executed when the "search" button in clicked.

    40 seconds is way to long even with an ajax-indicator...
     
    aRo`, Jul 22, 2007 IP
  3. Greg Carnegie

    Greg Carnegie Peon

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I wrote an article on creating first ajax application at the end of this article you can download whole project which is explained step by step in the article. I implemented there animated gif and "Requesting data" text on loading so probably this is what you are looking for?
     
    Greg Carnegie, Jul 25, 2007 IP
  4. NoamBarz

    NoamBarz Active Member

    Messages:
    242
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #4
    First take all of your PHP code and place it in a new PHP file. Let's say you call that file DataFinder.php. Next, insert the following javascript code in your initial page (the one that will say please wait).

    This is the javascript code you need:

    function getHTTPObject() {
    if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
    }
    try {
    return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    return new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
    }
    return false;
    }

    var http = getHTTPObject();

    function handleHttpResponse() {

    if (http.readyState == 4) {
    var temp = http.responseText;
    document.getElementById("PHPDATA").innerHTML=temp;
    }
    }


    function LoadData(){

    var url = "DataFinder.php";
    http.open("GET", url, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
    }


    Now we get to the HTML part of you initial page. In the body of the document, you need to place a <DIV> that will hold the search results. Insert the following code:

    <div id="PHPDATA"> Please wait while the data is loading </div>

    No, last but not least, you need to call the Ajax function when the page loads. So change your HTML body tag <body> to this:

    <body onload="javascript:LoadData()">
     
    NoamBarz, Jul 25, 2007 IP
  5. wmtips

    wmtips Well-Known Member

    Messages:
    598
    Likes Received:
    70
    Best Answers:
    1
    Trophy Points:
    150
    #5
    I would recommend use JQuery framework, it is tiny and efficient. There is a cool plugin for JQuery available - BlockUI , you can freeze and fade the screen while performing AJAX requests.
     
    wmtips, Jul 26, 2007 IP
  6. aRo`

    aRo` Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i confirm, jQuery rocks !

    they have easy selectors and a lot of plugins on there homepage.
     
    aRo`, Jul 26, 2007 IP
  7. samyak_bhuta

    samyak_bhuta Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I am in with Billy and aRo . jQuery is superb and super cool. Also, I still think that 40 seconds is tomuch. Try to give partial result ( i.e. use pagination ) or make query faster by putting indexin your database. Lest you can make user enter criteria which narrow down results.

    Hope this will help.

    Samyak
    www.anvay.net
     
    samyak_bhuta, Jul 27, 2007 IP
  8. kailashr2k

    kailashr2k Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hey its great but i want to display the same while the query get run..The query display the result in the same page itself so in order to avoid the idle state i want to display "please wait" screen help me to find it please...
     
    kailashr2k, Jun 10, 2008 IP
  9. samirkumardas

    samirkumardas Banned

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    you can take a look ajaxload site
     
    samirkumardas, Jun 14, 2008 IP