Ajax Uncaught TypeError: in simple function

Question

In my code i am getting this error

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

but when I remove

delay(function(){ ... }, 1000);

from my source file my code works perfectly I don't know what I am doing wrong with it or missing something that is really important to do, here is my full code

function checkurl(textname) {
$.ajax({
    type: "POST",
    url: "includes/modContent/checkurl.php",
    data: "checkurl=" + textname,
    dataType:'text', //or HTML, JSON, etc.
    success: function(response){
        //alert(response);
        textname = response;
        }
    });
    return textname;
}

$('input[name=txtPageName]').keyup(function() {
    delay(function(){
      $('input[name=txtSeoURL]').val(checkurl($(this).val()));
    }, 1000);
});

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

It's because you've changed the scope of `this` when you use it within the `setTimeout` — Rory McCrossan, Aug 14 '17 at 15:50
Also, your `checkurl` function wont return what you think it does :) - you can't return from an AJAX call — tymeJV, Aug 14 '17 at 15:52
so how do I resolve it any idea or a piece of code to follow — Rtra, Aug 14 '17 at 15:52
@tymeJV I have test this checkurl function it returns from php file :) if I am wrong please clear me — Rtra, Aug 14 '17 at 15:56
You return textname from checkURL, which will be undefined, and then something inside jquery does .toLowerCase on it. the reason textname is undefined is because of [this](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — James, Aug 14 '17 at 16:12
You need better understanding of async and how it works. You can't return from an ajax function like that. Use the callback to manipulate data returned from the server. — James, Aug 14 '17 at 16:14

score 3 · Accepted Answer · answered Aug 14 '17 at 15:56

The immediate issue, amongst others, is that you're changing the scope of this when you pass the callback to the setTimeout() handler.

To fix the issue you need to invert your logic so that you set the val() of the field when the AJAX completes instead of using a convoluted method of attempting to return data from an async function. Try this:

var timeout;
$('input[name="txtPageName]"').keyup(function() {
  clearTimeout(timeout);
  var textname = $(this).val();

  setTimeout(function() {
    $.ajax({
     type: "POST",
      url: "includes/modContent/checkurl.php",
      data: { checkurl: textname },
      dataType: 'text',
      success: function(response) {
        $('input[name=txtSeoURL]').val(response.trim());
      }
    });
  }, 250);
});

i have test it but it returns no value do you have any idea to fix it — Rtra, Aug 14 '17 at 16:09
You seem to have missed the point - the whole idea is not to return anything. In fact, you can't as the function is asynchronous. This answer is showing you how to use async callbacks properly. — Rory McCrossan, Aug 14 '17 at 16:10

Ajax Uncaught TypeError: in simple function

1 Answers1