Question

I have an AJAX script which should trigger a loading image once executed and then hide it once I get the result from the web-service, however the image is now showing.

My code is as below:

    <script type="text/javascript">
        function get_Code_Results() {
            document.getElementById("loader").innerHTML = "<img src=\'loading.gif\' />";
            var url = document.location;
            if (window.XMLHttpRequest) req = new XMLHttpRequest();
            else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
            req.onreadystatechange = processRequest;
    //      req.open("GET", url, true);
    //      req.send(null);
            req.open("POST",url,true);
            req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            req.send("isbns="+document.getElementById("Code").value);
            function processRequest() {
        if (req.readyState == 4 && document.getElementById("1").checked == true) {
            document.getElementById("results").value = "myfirsturl.com" + req.responseText;
        }
        else if (req.readyState == 4 && document.getElementById("2").checked == true) {
            document.getElementById("results").value = "myurl.com" + req.responseText;
        }           
    }
}
    </script>

and I have a position where I want the loader to be displayed:

    <div id="loader"><img src="loading.gif" style="display:none;" /></div>

Where do I have the mistake in my code? Some advice would be greatly appreciated!

Answer 1

  <div id="loader"><img src="loading.gif" style="display:none;" /></div>

You need to change the style="display:none;". I suggest you write the following code instead :

<div id="loader" style="display:none;"><img src="loading.gif" /></div>

Then when needed :

$('#loader').show(); // To show the laoding icon
$('#loader').hide(); // To hide it