Cannot read property 'abort' of undefined

Question

I am trying to cancel all remaining AJAX requests if the length of an input field is empty. However, I am seeing this error:

Uncaught TypeError: Cannot read property 'abort' of undefined

$("input#enter").keyup(function() {
    if(this.value.length < 1) {
        $("#display").empty();
        request.abort(); // <--- this line
    }else{ 
        var request = $.ajax({
            type: "POST",
            url: "getdata.php",
            data: "title=" + this.value,
            success: function(data) {
                $("#display").empty(); 
                $("#display").html(data);
            }
        });
    } 
});

This is where I saw a similar example and they used request.abort(): Stop all active ajax requests in jQuery

Because you're trying to call a method on a variable you haven't defined... — David, Sep 23 '17 at 12:38

Rory McCrossan · Accepted Answer · 2017-09-23T12:51:41.817

0

Your issue is due to the scope of the request variable. You need to declare it outside of the handler:

var request;

$("input#enter").keyup(function() {
  var $display = $('#display');
  if (this.value.trim().length < 1) {
    $display.empty();
    request && request.abort();
  } else {
    request = $.ajax({
      type: "POST",
      url: "getdata.php",
      data: { title: this.value.trim() },
      success: function(data) {
        $display.html(data);
      }
    });
  }
});

Note that I amended the JS code slightly, as you don't need to call empty() if you're overwriting the html() anyway.

Also, assuming this is a kind of filtering system, you may want to consider using abort() on request in all instances, as if a new key has been pressed then the previous request is no longer relevant to the results and can be ended - something like this:

var request;

$("input#enter").keyup(function() {
  var $display = $('#display');
  request && request.abort(); // always abort the previous request, if there was one

  if (this.value.trim().length > 0) {
    request = $.ajax({
      type: "POST",
      url: "getdata.php",
      data: { title: this.value.trim() },
      success: function(data) {
        $display.html(data);
      }
    });
  }
});

edited Sep 23 '17 at 12:51

answered Sep 23 '17 at 12:38

Rory McCrossan

331,213
40
305
339

Thanks for your answer, but it seems the outstanding AJAX calls still run as it shows in the network console tab – The Codesee Sep 23 '17 at 12:41
I just updated to add a note about that. You seem to be only aborting the request when a value was typed but then deleted. It would make more sense to *always* abort the previous request, then make a new one only if a value of appropriate length was typed. – Rory McCrossan Sep 23 '17 at 12:42
Yes that may be a better idea. Should I place the abort function inside the keyup function? – The Codesee Sep 23 '17 at 12:43
Is it more beneficial to use `trim()`? – The Codesee Sep 23 '17 at 12:47
The code doesn't seem to be having any effect on my site and it still runs every request even when a new one is made – The Codesee Sep 23 '17 at 12:50
Ah i fixed it, simple typo on my end. Thank you! – The Codesee Sep 23 '17 at 12:58

Cannot read property 'abort' of undefined

1 Answers1