Handling multiple AJAX call in jquery

Question

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

What is the error?

Jordan Soltman
– Jordan Soltman

2017-04-02 02:12:38 +00:00
Commented Apr 2, 2017 at 2:12 — Jordan Soltman
– Jordan Soltman, Commented Apr 2, 2017 at 2:12
I have updated the code with error details

Arpita Dutta
– Arpita Dutta

2017-04-02 02:19:05 +00:00
Commented Apr 2, 2017 at 2:19 — Arpita Dutta
– Arpita Dutta, Commented Apr 2, 2017 at 2:19

Jordan Soltman · Accepted Answer · 2017-04-02 02:32:20Z

2

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

});

answered Apr 2, 2017 at 2:32

Jordan Soltman

3,95322 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Handling multiple AJAX call in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related