Callback function not working in jQuery

Question

I've tried to understand Callbacks, but perhaps I'm not getting it. Yes, I have looked at How to write a jQuery function with a callback?, How to return value from an asynchronous callback function? and at this explanation and have tried to model my code based on the examples there. I even read this tutorial but it looks like I am having trouble understanding the concept. Or maybe it is just some small error...

Just for context, I am trying to create a simple Login/Signup form where I make sure people don't signup twice and also send them to signup when they try to login when they are not signed up, etc...

Here's the HTML:

<div id="LoginSignup">
    <form>
        <p id="LoginSignupMesg">Signup or Login</p>
        <input type="text" id="LoginID" placeholder="Phone/Email" size="10" value="" />
        <input type="password" id="password" placeholder="Password" size="10" value="" />
        <input type="button" value="Login" id="Login" />
        <input type="button" value="Signup" id="Signup" />
    </form>
</div>

and here's one version out of many that I have tried of the code:

var xsl ="";
function idcheck(id, pwd, callback) {
$.ajax("ls.php?l='" + id + "'&p='" + pwd + "'", {
    success: function(data) {
     if (typeof callback === "function") {
        callback(data);
     } else {alert("Not a function!")}
    },
    error: function() {
        alert('The file failed to load!');
    },
    type: 'POST'
});
//  return xsl;
}
function c(d){
   xsl = d;
}
$(document).ready(function() {
    $("#Login").click(function(event) {
        var x = $("#LoginID").val();
        var y = $("#password").val();
        idcheck(x, y, c);
        alert('Login: ' + xsl);
    });
});
$(document).ready(function() {
    $("#Signup").click(function(event) {
        var x = $("#LoginID").val();
        var y = $("#password").val();
        idcheck(x, y, c);
        alert('Signup: ' + xsl);
    });
});

If I click either, the Login or Signup buttons, I get a blank string the first time and if I click either one after that, I get the SQLData from the ajax call. Once the data shows in the alert box, it shows no matter how many times I click.

I have also tried returning the value from idcheck as you can see from the commented out line, and also using:

xsl = idcheck(x, y, c);

but nothing seems to give me the data I want. What am I dong wrong?

web developer · Answer 1 · 2017-02-24T11:28:17.003

2

The issue is after getting success response from 'idcheck' function, it will move to the next line (i.e,alert('Login: ' + xsl);) before entering inside your call back function 'c'. So first time you are getting an empty message. Next time you will get the previous res value in your alert.

The solution for this is you can use this operation (alert('Login: ' + xsl);) inside your call back function itself.

edited Feb 24 '17 at 11:28

answered Feb 24 '17 at 10:49

web developer

457
2
10
25

score 2 · Accepted Answer · answered Feb 24 '17 at 10:52

2

Ajax calls are asynchronous. alert('Login: ' + xsl); is executing before your "success" function, because the server has not yet returned a response at that time. That's why it's blank.

Any action you want to perform which relies on data returned by an ajax call must take place in the success function, or a function which is called by it.

I suggest you move alert('Login: ' + xsl); inside your function "c".

answered Feb 24 '17 at 10:52

ADyson

57,178
14
51
63

OK, it's beginning to make sense. I had thought that the alert would wait for the callback. OK, so that means that I have to do all the processing in the function called "c". And that means adding an additional parameter so it knows where the call is coming (idcheck(x, y, "Signup", c);) and (idcheck(x, y, "Login", c);) with corresponding changes cascading down to idheck and c. This is rather clunky - I had wanted to do the processing in the Signup and Login Click functions itself and just call a common function to check the database. – Chiwda Feb 24 '17 at 11:35
I'll probably accept your answer or the identical one above :-), but meanwhile is there a better way to do this? – Chiwda Feb 24 '17 at 11:37
Depends what you mean by "better"? What aspect are you unhappy with? – ADyson Feb 24 '17 at 11:41
I would have liked to do all the processing in function idcheck rather than create yet another function. I wanted c to be a minor detour used to get the data. Maybe I'm wrong, but this doesn't feel like "tight" code. – Chiwda Feb 24 '17 at 12:03
1

well, as it stands you don't actually need function "c". You could do everything within the "success" function itself. Unless you are planning to make c more complicated in future, or pass in different functions as the "callback" parameter. But the nature of ajax is such that you can't do everything directly inside idcheck, you do need something extra - whether that's your own function or just directly within the "success" callback is up to you. – ADyson Feb 24 '17 at 12:08
1

Note that you can directly define "callback" as the "success" parameter if you want, no need to have an anonymous function in there. `success: callback` will work just as well, as long as "callback" has the right signature, which "c" does. – ADyson Feb 24 '17 at 12:08

Callback function not working in jQuery

2 Answers2