jquery ajax call not returning as expected

Question

I'm unsure why this jquery ajax call is failing. Basically, I want to authenticate and if the authentication is a success, do something.

I found this but the answer seems to abbreviated to be much use to me (is assumes you already know how to implement the solution). jQuery ajax return value

Here is my ajax call (I have stripped the fluff for getting the username/password):

function authenticate() {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            if(data==='true') {
                return "true";
            } else {
                return "User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data;
            }
        },
        error:function(jqXHR, textStatus, errorThrown){
            return "User failed to log into the system. Potential problem with server or connection.";
        }
    });

And I call it in this function:

function attemptEventSubmit(eKey) {
    var authReturn = authenticate();
    if(authReturn=="true") {
        emailEvent(eKey);
    } else {
        alert(authReturn);
    }
}

When it returns, it always alerts that authReturn is "undefined". I suspect it's defining authReturn as undefined because the authenticate function 'finishes' before the ajax call gets back...

But I'm not sure how to fix this problem.

I suspect I could call separate instead of returning values... (say, in this example, calling the emailEvent function directly in the ajax success function) but that would make the authenticate function specific... and it'd no longer be able to be used for authenticating for other purposes.

The "A" in "AJAX" stands for "Asynchronous". That means that the success and error methods are called some time in the future, not when you make the call. — Paul Tomblin, Mar 16 '15 at 18:31
Right -- I get that is the heart of my problem. But I'm still not sure the best way to solve it. There are a handful of methods below... I'll investigate. — lowcrawler, Mar 16 '15 at 18:45

score 2 · Accepted Answer · answered Mar 16 '15 at 18:37

You can use your code but will need a callback. A better way would be look into promises.

function authenticate(onsuccess, onfail) {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            onsuccess(data); // you should check if this is a function
        },
        error:function(jqXHR, textStatus, errorThrown){
            onfail(errorThrown);
        }
    });

function attemptEventSubmit(eKey) {
    authenticate(
        function(ajaxData){
            emailEvent('whatever you want to send');
        },
        function(errThrown){
            alert(errThrown);
        });
}

score 1 · Answer 2 · answered Mar 16 '15 at 18:36

How about pass in a callback function as another argument of the function authenticate().

So the code changes will be

function authenticate(callback) {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            if(data==='true') {
                //return "true";
                callback("true");
            } else {
                //return "User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data;
                callback("User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data);
            }
        },
        error:function(jqXHR, textStatus, errorThrown){
            //return "User failed to log into the system. Potential problem with server or connection.";
            callback("User failed to log into the system. Potential problem with server or connection.");
        }
    });

Calling the function authenticate will become:

function attemptEventSubmit(eKey) {
    authenticate(function(authReturn){
        if(authReturn=="true") {
             emailEvent(eKey);
        } else {
             alert(authReturn);
        }
    });

}

This is a good answer. The answer I implemented was eyegropram's answer, however. — lowcrawler, Mar 16 '15 at 18:59

jquery ajax call not returning as expected

2 Answers2