ajax form loading (while waiting)

cosminx2003 · 07-23-2008, 09:51 PM

Hi, i made a php application that shows the results with ajax (without page reloading), the request it's made in 30 sec, it;s too much and the user will think that the application doesn't work, so i want to put a preloader or a loading script.

PS: i searched on google and i found just 2-3 scripts that don't work.
Thanks.

WA · 07-23-2008, 10:38 PM

In Firefox, you can use the onprogress event handler, though IE doesn't have anything similar, so I'm not sure how you'd implement a cross browser "progress bar" for your Ajax request.

A1ien51 · 07-24-2008, 04:36 AM

Can you show us your basic code for the Ajax call. With that, we can give you some pointers on how to show a waiting message.

Eric

cosminx2003 · 07-24-2008, 08:57 AM

Here's the ajax code.

Code:

<script type="text/javascript" language="javascript">
var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="namefinder.php"
     var params = "results=" + escape(encodeURI( document.getElementById("results").value )) +
                    "&extension=" + escape(encodeURI( document.getElementById("extension").value )) +
                    "&no=" + escape(encodeURIComponent( document.getElementById("no").value )) +
                    "&kind=" + escape(encodeURI( document.getElementById("kind").value )) +
                    "&cv=" + escape(encodeURI( document.getElementById("cv").value ));
                    
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length", params.length);

xmlHttp.send(params)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
</script>

Thanks you for your time !

A1ien51 · 07-24-2008, 06:57 PM

It is better if you switched these two lines.

xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("POST",url,true)

It really does not matter in your case, but it is better practice to do so

well there is a few thing syou can do. Easiest thing you can do is add a div to your page and maybe use an activity indicator: http://www.webscriptlab.com/index.php

Code:

<div id="loadingMsg" style="display:none;position: absolute;background-color:#CCC;width:200px; height:200px;text-align:center;top:100;left:100">Loading Please Wait</div>

Before the open statement you show the div

Code:

document.getElementById("loadingMsg").style.display = "block";
xmlHttp.open("POST",url,true)

and hide it when the response is back

Code:

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
  document.getElementById("loadingMsg").style.display = "none";
  if(xmlHttp.status == 200)
    {
      document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
    }
    else
    {
      alert("Error reading data");
    }
 } 
}

Hope that helps

Eric

djBo · 07-25-2008, 01:00 PM

cosminx2003,

I have done something similar to the older gmail "Loading..." message.
In fact, I nicked it of their pages, end implemented it inside my AJAX class.

on my page:

Code:

<body><div id="ajaxstatus" style="visibility: hidden;">Loading...</div>

in my AJAX class:

Code:

//function HttpClient() {};
var HttpClient = Class.create();
HttpClient.prototype = {
	requestType: 'GET',
	isAsync: false,
	xmlHttp: false,
	onCallback: false,
	contentDiv: false,
	statusDiv: 'ajaxstatus',
	removeDivOnError: false,

	initialize: function(div) {
		this.contentDiv = div;
	},

	onSend: function() {
		if (this.statusDiv) {
			document.getElementById(this.statusDiv).style.visibility = 'visible';
		}
	},

	onLoad: function() {		
		if (this.statusDiv) {
			document.getElementById(this.statusDiv).style.visibility = 'hidden';
		}
	},
etc...

PS... gmail has changed it from being red in the right upper corner to yellow in the middle of the page...

Hope this helps,
Rory