Member Avatar for chira9na9pal 
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
  • 260 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by chira9na9pal
Member Avatar for stbuchok

Are you trying to ask a question? Can you elaborate on what you are trying to accomplish?

Member Avatar for chira9na9pal

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

Member Avatar for JorgeM

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)">

Member Avatar for chira9na9pal

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
Member Avatar for JorgeM

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.