How to make a function wait for jquery ajax to complete

Question

I have a login form,when the user clicks the submit button,I have a main function which i call to decide whether the page should migrate. Inside the main function,I call two other functions:one to check that neither username nor password field is empty and the second function has an ajax that checks if the combination of username and the password is correct: the problem is that the function with ajax doesnt work correctly since the main function doesn't wait for that inner function with ajax to complete(asynchronous): here is the sample code:

<h3 id="myerror" style="display:none;">Invalid username or password</h3>

<form action="mylogin.php" onSubmit="return mymain()">
username<input type="text" id="myuname">
password:<input type="password" id="mypass">
</form>

//and the script

<script>

function mymain() {
    if (is_not_empty() && is_in_database()) {
        return true;
    } else {
        return false;
    }
}

function is_not_empty() {
    var uname = $("#myuname").val();
    var pass = $("#mypass").val();
    if (uname == "" && pass == "") {
        $("#myerror").css("display", "block");
        return false;
    } else {
        return true;
    }
}

var a;

function isthere() {

    var uname = $("#myuname").val();
    var pass = $("#mypass").val();

    //the ajax php below returns either isthere or notthere with reference to the username 
    and password combination.

    $.post("http://localhost/passtester/pass1.php", {
        username: uname,
        password: pass
    }, function (feedbak) {
        a = feedbak;
    });
    if (a == "isthere") return true;
    if (a == "notthere") return false;
}
</script>

I will really appreciate your help

If you want sync, use .ajax instead, and pass async:false. – Hanlet Escaño Mar 19 '14 at 23:15 — Hanlet Escaño, Mar 19 '14 at 23:15

score 1 · Answer 1 · answered Mar 19 '14 at 23:15

1

Use on success function

   $.ajax({

    success: function(data){

    },
    error: function(error){

    }
 });

answered Mar 19 '14 at 23:15

fuzzybear

2,325
3
23
45

score 1 · Answer 2 · answered Mar 19 '14 at 23:17

Your problem is within this part:

$.post("http://localhost/passtester/pass1.php", {username:uname,password:pass}   
,function(feedbak)
{
   a=feedbak;
});
if(a=="isthere")
  return true;
if(a=="notthere")
  return false;
}

Your conditionals are outside of the scope of the callback function, and will get called before the ajax request is processed:

It should most likely be like this:

$.post("http://localhost/passtester/pass1.php", {username:uname,password:pass}   
,function(feedbak)
{
  a=feedbak;

  if(a=="isthere")
     return true;
  if(a=="notthere")
     return false;
  }
});

A better way to do it would be to use the $.ajax() function within jquery, rather than the short hand $.post. This gives you access to the .success and .error events. In which case you would use your api to return a 200 when the login is successful (.success) or a 401 (unauthorized) or something similar when the username/password are wrong. That way you easily distinguish between a successful attempt and an error attempt. And visualy notify the user of what is happening

Hope this helps.

To Janr:=>Thanks for contributing but you know the ajax function doesn't explicitly return it's value because it wasn't the one that was called and furthermore it's inside another function. so it is not returning to the mymain() function. There is no effect — Jonah Kman Geoman, Mar 20 '14 at 08:09

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

You can't return a value from a async method, instead you need to use a callback method like

function mymain() {
    if (is_not_empty()) {
        is_in_database(function (isthere) {
            if (isthere) {
                $('form').submit();
            }
        })
    }
    return false;
}

function is_not_empty() {
    var uname = $("#myuname").val();
    var pass = $("#mypass").val();
    if (uname == "" && pass == "") {
        $("#myerror").css("display", "block");
        return false;
    } else {
        return true;
    }
}

function is_in_database(callback) {

    var uname = $("#myuname").val();
    var pass = $("#mypass").val();

    //the ajax php below returns either isthere or notthere with reference to the username     and password combination.

    $.post("http://localhost/passtester/pass1.php", {
        username: uname,
        password: pass
    }, function (feedbak) {
        callback(feedbak == "isthere")
    });
}

How to return the response from an AJAX call?

edited May 23 '17 at 12:05

Community

1
1

answered Mar 19 '14 at 23:20

Arun P Johny

384,651
66
527
531

,Thanks, I think this might work but one more clarification if you don't mind: inside the is_in_database() function,where you have checked callback(a=="isthere"), Now this variable a,Do we set it globally like i did in my question and still before the callback(a=="isthere")?, or how do we place it?. Thanks in advance. – Jonah Kman Geoman Mar 20 '14 at 08:30
@user243974 sorry... it should have been `feedbak == 'isthere'` – Arun P Johny Mar 20 '14 at 08:42
Thanks a lot for your assistance; the change has helped – Jonah Kman Geoman Mar 20 '14 at 09:07

How to make a function wait for jquery ajax to complete

3 Answers3