How to make a visitor wait during a search

[Govardhann]

I created a form that can search a MySQL database. This research can be long so I wanted to display an timer to await the visitor. But my code works in Mozilla and not in IE or Google Chrome. So how can I make the user to understand to let him wait till the search is complete?

HTML code:

<form method="get" id="rech" action="search.php" onsubmit="return display();" >
<input type="submit" value="research" onclick="pac()" />
</form>

JavaScript code:

function display()
{
	var div = document.getElementById("result");
	var form = document.getElementById("rech").elements;
	var txtCheck = "";
	if(form.inLine.checked)
		txtCheck += "&inLine=on";
	if(form.withPhoto.checked)
		txtCheck +="&withPhoto=on";
	if(form.ageCrossing.checked)
		txtCheck +="&ageCrossing=on";
	var content = file("../scriptPHP/scriptSearch.php?place="+form.place.value+"&ageMin="+form.ageMin.value+"&ageMax="+form.ageMax.value+txtCheck+"&sizeMin="+form.sizeMin.value+"&sizeMax="+form.sizeMax.value);
	div.innerHTML = content;
	return false;
}
function pac()
{
	var div = document.getElementById("att");
	
	div.style.display = "block";
	
}
function file(file)
{
    if(window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return false ;
    xhr_object.open("GET", file, false);
    xhr_object.send(null);
	if(xhr_object.readyState == 4) 
		return xhr_object.responseText ;
     else 
		return false ;
}

[void]

Not sure that the creation of your object is functional for IE:

Try with this principle, which works with Firefox and IE (I have not tested Opera) to adapt for your function "function file(file)" (which I cut into 2 distinct functions in transition (1 to create the object xhr, the other to play with your subject):

function getXMLHttpRequest() {
	var xhr = null;
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");		// IE
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();  						// FireFox
		}
	} else {
		alert("Your browser does not support the XMLHTTPRequest object..."); // Old browsers
		return null;
	}
	return xhr;
}

[CitricAcid]

In my opinion, try something like this:

function display()
{
	var div = document.getElementById("result");
	var form = document.getElementById("rech").elements;
	var txtCheck = "";
	if(form.inLine.checked)
		txtCheck += "&inLine=on";
	if(form.withPhoto.checked)
		txtCheck +="&withPhoto=on";
	if(form.ageCrossing.checked)
		txtCheck +="&ageCrossing=on";
        document.getElementById("IdOfYourImageOfTimer").style.display = "";
	var content = file("../scriptPHP/scriptSearch.php?place="+form.place.value+"&ageMin="+form.ageMin.value+"&ageMax="+form.ageMax.value+txtCheck+"&sizeMin="+form.sizeMin.value+"&sizeMax="+form.sizeMax.value);
	div.innerHTML = content;
        document.getElementById("IdOfYourImageOfTimer").style.display = "none";
	return false;
}
function pac()
{
	var div = document.getElementById("att");
	div.style.display = "block";
}
function file(file)
{
    if(window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return false;
    xhr_object.open("GET", file, false);
    xhr_object.send(null);
	if(xhr_object.readyState == 4) 
		return xhr_object.responseText ;
     else 
		return false ;
}

[Govardhann]

Thank you for your answer but still I get the same result. In fact I feel that as long as one does not have function, display page does not change in IE and Google chrome and so my timer does not appear. Is this possible?

[CitricAcid]

The way I spoke, it would not work with a synchronous request: here it would be inappropriate. No, it is necessary that the "style.display = none" be placed in the code executed to return from Ajax call (ie in your onreadystatechange function), otherwise it is executed immediately, no matter what the call afterwards.

[void]

I give you an example that should help:

In general you should:

- A function that you created your XMLHTTP object. It is the function that I've put above (getXMLHttpRequest)

- A event listener which will involve the generation of your query to an event on your page, for example, a click on a div to your page: Look at the doc. In summary, we have to create a div in your HTML page, and in your JavaScript code, assign an event on this <div>.

- Tone Appeal request xhr triggered by an event on your page (at preset):

XHRrequest(ShowRequestResult, CommandToPost(command), global_js1, true , i , false, 0, '') ;

- your timer (not shown) in your HTML page

<!-- LOADER -->
<span id="loader" style="display:none;"><img src="../images/ajax-loader.gif" alt="loading" /></span>

- A function that generates the query and manages the status of return.
For example:

function XHRrequest(callback, formatted_command, treatment_file, xhr_Async_mode, num_id, pop, term_pop_sec, pop_url) {
		var debug = true;
		var xhr 	= getXMLHttpRequest();
		var sMethod	= "POST";
		var sUrl	= treatment_file;
		var bAsync	= (xhr_Async_mode === undefined)? true : xhr_Async_mode ;
	xhr.onreadystatechange = function() {
			if (xhr.readyState < 4) {
				document.getElementById("loader").style.display = "inline";  
				if (pop) {
					term_pop_sec = term_pop_sec * 1000;
					PopUp('http://www.yourdomain.com/your_directory_pop_up/'+ pop_url, 'open', 'test', '400', '250', 'left', 'center', term_pop_sec, false);
				}
			 }
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
				document.getElementById("loader").style.display = "none"; 
				if (formatted_command != false) {
					callback(xhr.responseText, num_id);
				}
		}
	};
		if (sUrl && formatted_command != false) {
			xhr.open( sMethod, sUrl , bAsync );
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(formatted_command);
		}
		else{
			if (debug) alert('no treatment request sent :' + sUrl + ', ' + formatted_command);
		}
}

- A function of callback which will be called to return your Ajax application

function ShowRequestResult(oText, id_number ) {
// 1st function callback of XHRrequest()
	
	if (oText == "Ok") { // its what is returned by your server
	... to change your display for example
	}
	else {
         ... you warn your client that there is a problem
	}
}