Jquery ajax abort() gives error on console

Question

My jQuery code (below) method gives following error:

TypeError: jQuery111007245809631238611_1456231588251 is not a function

    $(function() {
      // Ajax request sent.
      var xhr = $.ajax({
        url: 'http://gdata.youtube.com/feeds/api/videos/wbB3lVyUvAM?v=2&alt=jsonc',
        data: {
          format: 'json'
        },
        beforeSend: function() {

        },
        dataType: 'jsonp',
        success: function(data) {
          //console.log(data);
          $('#info').html(data.error.message);
        },
        type: 'GET',
        error: function() {
          if (xhr.statusText == 'abort') {
            $('#info').html('Aborted!');
            return;
          }
          alert('error');
        }
      });
      // Abort ajax request on click


      $('#btn').on('click', function() {

        xhr.abort();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<button id="btn">click to abort </button>

  <div id="info"></div>
</body>

(also available at http://jsfiddle.net/e3ok3s6e/3/)

Is there any possible way to fix this error?

Open the console, and click the 'click to abort' button in jsfiddle, while the loading.. appears. Not after the data has loaded. — Jiman Sahariah, Feb 23 '16 at 14:06
To get that error one has to be very quick in terms of clicking the abort button. — Sahil, Feb 23 '16 at 14:17
Yes, but this shouldn't happen. I am in a situation where the service is slow, and the user has the option to cancel the request. The abort method is working fine but once we get response from the aborted request, the error appears. — Jiman Sahariah, Feb 23 '16 at 14:23
Check if xhr is active before you can abort it. set xhr as a global variable, then in your click function check if( xhr) { xhr.abort(); } — The concise, Mar 30 '23 at 07:19

score 1 · Answer 1 · answered Feb 23 '16 at 14:49

You have to use

dataType:'json' in your request..

    $(function() {
      // Ajax request sent.
      var xhr = $.ajax({
        url: 'http://gdata.youtube.com/feeds/api/videos/wbB3lVyUvAM?v=2&alt=jsonc',
        data: {
         dataType:'json'
        },
        beforeSend: function() {

        },
        dataType: 'jsonp',
        success: function(data) {
          //console.log(data);
          $('#info').html(data.error.message);
        },
        type: 'GET',
        error: function() {
          if (xhr.statusText == 'abort') {
            $('#info').html('Aborted!');
            return;
          }
          alert('error');
        }
      });
      // Abort ajax request on click


      $('#btn').on('click', function() {

        xhr.abort();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="info"></div>
</body>

Can you explain why or how this solves the problem? JSONP requests simply cannot be aborted (you can only remove the callback function), so I'm not sure how this answer solves the problem. — apsillers, Feb 23 '16 at 14:53
Using `dataType:'json'`, is not supported in this case, you can check the response in console. — Sahil, Feb 23 '16 at 15:55
As we cannot abort a jsonp request, this plugin will solve the issue: https://github.com/jaubourg/jquery-jsonp — Jiman Sahariah, Feb 23 '16 at 19:40

Jquery ajax abort() gives error on console

1 Answers1