CODEWITHSUNDEEP
jqueryajaxerror-handling
Arpita Dutta
Arpita Dutta

Reputation: 291

Handling multiple AJAX call in jquery

I have a tab structure in my website.

On click of each tab, a AJAX will be called, with a unique URL.
But whenever the consecutive tabs are being clicked, and a ajax is being triggered, the call is going to error instead of success.

Only the tab which is loaded on load is fetching proper output.
On switching tabs, (in case the first tab's URL is fetching huge data), it is going to error.

I have also used .abort(), but I don't think it is serving the purpose.
I may be missing something. Could any one suggest any solutions. Here is my sample code:

$(document).ready(function () {
  xhr = $.ajax({
      url: "www.something.com",
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert("Oops Something went wrong");
      }
  });

});

$("#stickertab").click(function (e) {
  appUrl = "www.nothing.com";

  $("#show_Sticker").empty();
  if (xhr != null) xhr.abort();
  xhr = $.ajax({
      url: appUrl,
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert(" Oops Something went wrong");
      }
  });

});

This is the error I am getting:

e = Object {readyState: 0, status: 0, statusText: "abort"}

Upvotes: 0

Views: 92

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3873

Add e.preventDefault() to your function. 

$("#stickertab").click(function (e) {

  e.preventDefault(); // <-- here

  appUrl = "www.nothing.com";

  $("#show_Sticker").empty();
  if (xhr != null) xhr.abort();
  xhr = $.ajax({
      url: appUrl,
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert(" Oops Something went wrong");
      }
  });

});

Upvotes: 2

Related Questions