ajax call returning undefined how to fix this

Question

I have the following function

function checkIfUserExist(userName){
    $.ajax({
        type : "POST",
        url : "/test/checkUserName/",
        data : "userName=" + userName,
        success : function(data) {
            return data;

        }
    });

}

I am trying to call it from another function

$('#userName').blur(function() {
    alert ( checkIfUserExist($('#userName').val()) );
}

every time i am getting undefined in the alert box. but it should show me the return value in the alert box.

how to fix this??

score 2 · Accepted Answer · answered Feb 26 '14 at 08:03

2

you cannot return value from ajax call like this. Because ajax is asynchronous process, it will not wait for the success event to happen. If you want to do so, you should try synchronous ajax. something like this

function checkIfUserExist() {
return $.ajax({
    type: "POST",
    url: "/test/checkUserName/",
    async: false
}).responseText;
}

But it is not a good thing to do. It will freeze the browser as well. The good thing you can do is to catch the Success event of ajax and do thing accordingly

answered Feb 26 '14 at 08:03

Anoop Joshi P

25,373
8
32
53

2

synchronous ajax is usually a bad idea - it will block the whole ui while waiting for a response – codebox Feb 26 '14 at 08:05
what is the use of `ajax` ? if you make it `sync`?? – zzlalani Feb 26 '14 at 08:06

Evgeniy · Answer 2 · 2014-02-26T08:45:28.693

1

Thats correct behavior, because ajax is async.

To reach your goal you need Jquery.when

$('#userName').blur(function() {
    $.when( 
        checkIfUserExist($('#userName').val())
    )
    .then(function( data ) {
        alert( data );
    });
});

edited Feb 26 '14 at 08:45

answered Feb 26 '14 at 08:09

Evgeniy

2,915
3
21
35

I am getting syntax error. - Syntax error on token ";", ) expected – LynAs Feb 26 '14 at 08:19
@LynAs, my bad, sorry, fixed – Evgeniy Feb 26 '14 at 08:35
its not doing anything – LynAs Feb 26 '14 at 08:44
I think you forgot to mention i have to change ajax code as well. return $.ajax({ .... its working now thanks – LynAs Feb 26 '14 at 08:50

zzlalani · Answer 3 · 2014-02-26T08:28:58.890

-1

Don't return the value from the ajax, since this is an asynchronous call, your alert will be called before the success and the result will always be undefined

alert the output with in your success callback.

function checkIfUserExist(userName){
    $.ajax({
        type : "POST",
        url : "/test/checkUserName/",
        data : "userName=" + userName,
        success : function(data) {
            alert( data );

        }
    });

}

and just call the function here

$('#userName').blur(function() {
    checkIfUserExist($('#userName').val());
}

edited Feb 26 '14 at 08:28

answered Feb 26 '14 at 08:02

zzlalani

22,960
16
44
73

Fixes the code, but doesn't explain the fundamentals of asynchronous JS (aka, the *reason* OP's code isn't working.) – Cerbrus Feb 26 '14 at 08:03
@Cerbrus Yes I was explaining it in my answer while your were down voting this answer – zzlalani Feb 26 '14 at 08:04
i think you mean undefined, not null – codebox Feb 26 '14 at 08:26
@zzlalani: It still doesn't mention the fact AJAX is asynchronous, which is at the core of the issue, – Cerbrus Feb 26 '14 at 08:50

score -1 · Answer 4 · answered Feb 26 '14 at 08:05

-1

Shouldn't the data be in json format?

data: { "userName": userName }

Also, consider using the "done" function instead of success. That should help with the asynchronous nature of the call.

answered Feb 26 '14 at 08:05

Brian Anderson

621
7
22

ajax call returning undefined how to fix this

4 Answers4