How to add loading indicator while data is loading

Question

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?

Hint: Add/Show it before calling $.ajax(...) and hide/remove it on success() and error() — techfoobar
– techfoobar, Commented Oct 22, 2013 at 4:47
possible duplicate of How to implement a jQuery spinner image in an AJAX request — Praveen
– Praveen, Commented Oct 22, 2013 at 4:59

Code Lღver · Accepted Answer · 2013-10-22 04:48:31Z

2

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();

answered Oct 22, 2013 at 4:48

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mithun Satheesh · Accepted Answer · 2013-10-22 04:56:58Z

2

You may use jquery ajaxStart and ajaxStop utilities for this.

like

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

edited Oct 22, 2013 at 4:56

answered Oct 22, 2013 at 4:47

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

Comments

Vikram Jain · Accepted Answer · 2013-10-22 04:53:15Z

1

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

answered Oct 22, 2013 at 4:53

Vikram Jain

5,6081 gold badge22 silver badges31 bronze badges

Comments

run · Accepted Answer · 2013-10-22 04:53:20Z

0

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

edited Oct 22, 2013 at 4:53

answered Oct 22, 2013 at 4:50

run

1,1967 silver badges14 bronze badges

2 Comments

Code Lღver Over a year ago

This will give the error at line: beforeSend : $('#somediv').show(); there should be comma not semicolumn.

Rohan Kumar Over a year ago

It should be beforeSend : function(){ $('#somediv').show();}, instead of beforeSend : $('#somediv').show();

Praveen · Accepted Answer · 2013-10-22 04:57:16Z

0

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();
     }
});

answered Oct 22, 2013 at 4:57

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Collectives™ on Stack Overflow

How to add loading indicator while data is loading

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related