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!!
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...
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?
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()">
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.
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
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...