CODEWITHSUNDEEP
javascriptjqueryajax
user1227914
user1227914

Reputation: 3514

jquery ajax - show loading div after click but before content loads?

I have the following code that will hide the list-btn div and load the list-response div. It may however take 1-5 seconds for the list-response div to load, so I'd like to make it show a div called list-waiting while that happens and then once list-response shows, hide the list-waiting again.

They are all in the same place, basically replacing eachother, so I need to show one of them at a time only.

How would I do that?

jQuery(document).ready(function($){
$('.add-to-list').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $.ajax({
    url: "https://www.domain.com/page.php?add=" + id,
    type: "GET",
    success: function (data) {
        $("#list-btn-" + id).hide();
        $("#list-response-" + id).show();
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#list-btn-" + id).hide();
        $("#list-response-" + id).html('ERROR');
    },
    timeout: 15000
  });
});
});

Upvotes: 1

Views: 1173

Answers (3)

Mackan
Mackan

Reputation: 6271

Another way to accomplish this would be "beforeSend". Just like you have events like "success" and "error", there is a "beforeSend" event:

$.ajax({
  url: "the.url.org",
  beforeSend: function() {
    $("#list-waiting-" + id).show();
    //doStuff
  },
  success: function() {
    $("#list-waiting-" + id).hide();
    //doOtherStuff
  }
})

Upvotes: 0

mplungjan
mplungjan

Reputation: 177796

If you are using jQuery 1.8 or higher, I would suggest

jQuery(document).ready(function($){
    $('.add-to-list').on("click",function (e) {
      e.preventDefault();
      var id = $(this).data("id");
      $("#list-btn-" + id).hide();
      $("#list-response-" + id).empty().hide();
      $("#list-waiting-" + id).show();
      $.ajax({
        url: "https://www.domain.com/page.php?add=" + id,
        type: "GET",
        timeout: 15000
      }).done(function (data) {     
        $("#list-response-" + id).html(data).show();
      }).fail(function (xhr, ajaxOptions, thrownError) {
        $("#list-response-" + id).html('ERROR').show();
      }).always(function() {});
        $("#list-waiting-" + id).hide();
      });
   });
});

Upvotes: 0

zavg
zavg

Reputation: 11061

Hide list-btn and show list-waiting div just before AJAX call. Then hide list-waiting div in callbacks before showing list-response div.

jQuery(document).ready(function($){
  $('.add-to-list').click(function (e) {
    e.preventDefault();
    var id = $(this).data("id");
    $("#list-btn-" + id).hide();
    $("#list-waiting-" + id).show();
    $.ajax({
      url: "https://www.domain.com/page.php?add=" + id,
      type: "GET",
      success: function (data) {     
          $("#list-waiting-" + id).hide();       
          $("#list-response-" + id).show();
      },
      error: function (xhr, ajaxOptions, thrownError) {
          $("#list-waiting-" + id).hide();       
          $("#list-response-" + id).html('ERROR');
      },
      timeout: 15000
    });
  });
});

Upvotes: 1

Related Questions