Question

so I do this:

function loginFunc(userNameOrEmail, passWord){
        var emailOrUserNameV = encodeURIComponent(userNameOrEmail);
        var passWordV = encodeURIComponent(passWord);
        $.getJSON("http://mysite.com/pullData/login.php?callback=?",
              {
                emailOrUserName: emailOrUserNameV,
                passWord: passWordV
              },
              function(recievedData) {
                if(recievedData[0] == 'true'){
                    return true;
                }
                else{
                    return false;
                }

        });

}

then I do this:

$('#loginBtnHtml').click(function(){
            var emailVar = $('#email_html').val();
            var pwdVar = $('#password_html').val();
            if(loginFunc(emailVar, pwdVar)){
                alert('good');
            }
            else{
                alert('bad');
            }

        });

If I run the loginFunc() with an alert(recievedData[0]); It works fine how do I get it to return bool to the $('#loginBtnHtml').click(); ?

When I do this to troubleshoot:

$('#loginBtnHtml').click(function(){
            var emailVar = $('#email_html').val();
            var pwdVar = $('#password_html').val();
            var whatIsBeingReturned = loginFunc(emailVar, pwdVar);
            alert(whatIsBeingReturned);

        });

it alerts with ‘Undefined’… not sure what I’m doing wrong.

Answer 1

You can’t return from ajax. Unless the ajax is synchronous (don’t do it!) You cannot depend on the code executing in any particular order. All of the functionality that requires a response from ajax has to be in the ajax callback.

function loginFunc(userNameOrEmail, passWord){
    ...
    return $.getJSON("http://mysite.com/pullData/login.php?callback=?",
}

$("#loginBtnHtml").on('click', function () {
   //snip
   loginFunc(emailVar, pwdVar).done(function (whatIsBeingReturned) {
      console.log(whatIsBeingReturned);
   });
});