CODEWITHSUNDEEP
jqueryajax
user2861903
user2861903

Reputation: 43

How to add loading indicator while data is loading

I would like to display loading indicator while data is loading. below is my current codes:

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
     }
});

What should I do?

Upvotes: 3

Views: 702

Answers (5)

Praveen
Praveen

Reputation: 56539

Here is a simple logic.

1) Before the ajax call, show the loading gif image.

2) on callback, hide the loading image.

$("#loading" ).show();
$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
         $("#loading" ).hide();
     }
     error: function (html) {
         console.log("errorResponse: " + html);
         $("#loading" ).hide();
     }
});

Upvotes: 0

Mithun Satheesh
Mithun Satheesh

Reputation: 27845

You may use jquery ajaxStart and ajaxStop utilities for this.

like 

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

Upvotes: 2

run
run

Reputation: 1186

$.ajax({
     type: "POST",
      beforeSend : function(){ $('#somediv').show();},
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
      $("#div").html(html);
      $("#somediv").hide();
     }
});

Upvotes: 0

Vikram Jain
Vikram Jain

Reputation: 5588

<script type="text/javascript">
$(document).ready(function() {  

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
     }
});

$( document ).ajaxStart(function() {
  $("#loading" ).show();
});

$( document ).ajaxStop(function() {
  $("#loading" ).hide();
});


});
 </script>

Upvotes: 1

Code Lღver
Code Lღver

Reputation: 15593

use this:

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $(selector).html();
         $("#div").html(html);
     },
     beforeSend: function(){
         $(selector).html("your loading image");
     }

});
$(selector).html();

Upvotes: 2

Related Questions