CODEWITHSUNDEEP
ajaxjquery
Kamal
Kamal

Reputation: 2180

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

Upvotes: 11

Views: 108297

Answers (2)

Nguyễn Trường
Nguyễn Trường

Reputation: 1

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>

Upvotes: -2

saihgala
saihgala

Reputation: 5774

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>

Upvotes: 41

Related Questions