ajax problem ?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kalpesh
Forum Commoner
Posts: 54
Joined: Sun Sep 21, 2008 5:04 am

ajax problem ?

Post 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 .
Turv
Forum Commoner
Posts: 25
Joined: Fri Mar 13, 2009 3:56 pm

Re: ajax problem ?

Post 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.
prasanna
Forum Newbie
Posts: 4
Joined: Mon Jul 20, 2009 2:33 am

Re: ajax problem ?

Post 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);
# }
# }
#
Post Reply