I create ajax function which loads content with on Change of Select element.
but now i want to display image loading.gif which displayed before the content being displayed.
How can i achieve this ??
Here is my javascript code :
Code: Select all
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getContent(content) {
var strURL="Ajax_Content.php?View="+ content;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('Content').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
Code: Select all
<select name="search" onchange="getContent(this.value)" id="searchId" class="search" style="font-family:Verdana;Font-size:10px;">
<option value="High" > High </option>
<option value="New" > New </option>
<option value="Expire" > Expire</option>
<option value="Low" > Low</option>
</select>
<div id="Content">
</div>