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

Answers


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> 

you can try with following script

<script>
function ajax()
{
    var options = {};
    options.url = '';
    options.type = 'post';
    options.data = '';
    options.dataType = 'JSON'; // type data get from sever
    options.contentType = 'application/json';// type data post to sever
    options.async = false;
    options.beforeSend = function () {

    };

    options.success = function (data)
    {

    };
    options.error = function (xhr, status, err) {

        console.log(xhr.responseText);
    };
    $.ajax(options);
}
</script> 

Need Your Help

Creating a Radial Menu in CSS

css css3 tooltip css-shapes

How do I create a menu which looks like this...

How can I disable highlighting in html or JS?

javascript html css highlight

I need to disable the highlighting of selected text on my web app. I have a good reason for doing this and know that this is generally a bad idea. But I need to do it anyway. It doesn't matter if I...