Page 1 of 1

ajax problem ?

Posted: Fri Jun 19, 2009 2:13 am
by kalpesh
Hi,
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);
        }
    }
 
Here is my html code :

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>
 
Thanks in advance .

Re: ajax problem ?

Posted: Fri Jun 19, 2009 3:16 am
by Turv

Code: Select all

 
    function getContent(content) {
        [color=#FF0000]// Display Loading Image before content is loaded
        document.getElementById('Content').innerHTML = '<img src="images/loading.gif" alt="Loading" />';[/color]
 
        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);
        }
    }
 
Just like above, When the getContent function is called, display the Loading Animation GIF (before doing any ajax requests), then once the request has been successful it will replace the animated gif with the response text.

Re: ajax problem ?

Posted: Mon Jul 20, 2009 5:25 am
by prasanna
# function getContent(content) {
#
#
# var strURL="Ajax_Content.php?View="+ content;
# var req = getXMLHTTP();
# if (req) {
# req.onreadystatechange = function() {
if (req.readyState == 1) {
// Display Loading Image before content is loaded
# document.getElementById('Content').innerHTML = '<img src="images/loading.gif" alt="Loading" />';
}
# 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);
# }
# }
#