0
function productview(view)
        {


        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              document.getElementById("product_view").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","product_ajax.php?result="+view,true);
        xmlhttp.send();
        }

Edited by chira9na9pal

3
Contributors
6
Replies
8
Views
5 Years
Discussion Span
Last Post by chira9na9pal
0

yes i am ask you question.. i want to load the loading image when my ajax is loaded on my page .. thanx

0

So, I assume that your product_ajax.php page will produce the image based on the result query string, correct?

If so, then just add the following javascript code to either the javascript block in the head element, or at the bottom of your body element before the closing tag..

<script type="text/javascript">
  window.onload=productview(variable/string);
</script>

Alternatively, you could add an event to the opening body tag...

<body onload="productview(variable/string)">

0

achully you did not get the my point .. my question is that when ajax is call on my page at that time when ajax shws records on my page .. that time will contain some time.. at that time i want to add the loading iamge. can u tell me how can me add the image .. thanx

Edited by chira9na9pal

0

I understand what you are asking now. I think there are a few ways go about this. the easiest is using jQuery. For example, you can use the ajaxStart() and ajaxComplete() methods to show and hide the loading/spinning image. I have an example of a tutorial that covers the various jQuery Event Handlers for Ajax: jQuery Ajax Event Handlers

however, without jQuery, you can use the same technique, just set the Style of the image to display:none|block depending on the sequence of events. For example....

You'll have an image element on your page somewhere:

<img id="loader" alt="loader' src="ajax-loader.gif" height="32" width="32" />

In your CSS, set the display property to 'none'

#loader {display:none}

So when you first load the page, the image is not seen on the screen because the display is set to none. Next, when the JavaScript function is executed, you set the display to 'block'. It remains in this state until you get the ajax data back and before you display your ajax data, you set the display sytle of the image back to 'none'

function productview(view)
        {
        document.getElementById("loader").style.display = "block";
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              document.getElementById("loader").style.display = "none";
              document.getElementById("product_view").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","product_ajax.php?result="+view,true);
        xmlhttp.send();
        }

I hope this helps you.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.