Kamal Kamal - 5 months ago 73
jQuery Question

Display Ajax loader before load data

Hello friends i want to show Ajax loader before Data load in particular div but problem is the data is coming dynamically on same page but my script calling data from another file

Script.php
please see my code below

Script

<script>
function loadingAjax(div_id)
{
$("#"+div_id).html('<img src="ajax-loader.gif"> saving...');
$.ajax({
type: "POST",
url: "script.php",
data: "name=John&id=28",
success: function(msg){
$("#"+div_id).html(msg);
}
});
}
</script>


HTML

<body onload="loadingAjax('myDiv');">


<div id="myDiv"></div>

<div id="xyz"><img src="ss/image/abc.jpg" /></div>


</body>


Its working fine but i want to load data in same page please help me

Thanks in advance ....

EDIT

I want to show loader before load data
#xyz
into
#myDiv

Answer

you can try with following html -

<body onload="loadingAjax('myDiv');">
    <div id="myDiv">
        <img id="loading-image" src="ajax-loader.gif" style="display:none;"/>
    </div>
</body>

and the script -

<script>
function loadingAjax(div_id) {
      var divIdHtml = $("#"+div_id).html();
      $.ajax({
           type: "POST",
           url: "script.php",
           data: "name=John&id=28",
           beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#"+div_id).html(divIdHtml + msg);
              $("#loading-image").hide();
           }
      });
}
</script> 
Comments