Javascript (jQuery) callback scope issue

Question

The following is a little jQuery code that I wrote to check if a a username and email exists in database. If they do I return false to prevent submitting the form.

The way I planned it is something like this. On submit after other stuff is valid. I use an ajax request to check if the username exists. If It does I then check the email in the same way.

And here is the problem. I cannot set the everythingIsOK inside the ajax callback. So if everything is ok I cannot return true.

Any ideas?

$(loginForm).submit(function(){
    var = everythingIsOK = false;
    if((loginForm).valid()){
        $.get("/ajax/usernameAvailable", {username: $("#username").val()}, function(data){
            if(data.available){
                $.get("/ajax/emailAvailable", {email: $("#email").val()}, function(data){
                    if(data.available){
                        everythingIsOK = true;
                    return true;
                    }else{
                        $("#notAvailable").html("Email already exists.").show().fadeOut(8000);
                        return false;
                    }
                }, "json");
            }else{
                $("#notAvailable").html("This is username already exist.").show().fadeOut(8000);
            }
        }, "json");
    }

    return everythingIsOK;
});

Nick Craver · Accepted Answer · 2010-11-09 14:15:26Z

You can call the native form.submit() function (which won't trigger this handler again) if it is ok, and return false from the jQuery handler always, like this:

loginForm.submit(function(){
  var form = this;
  if(!loginForm.valid()) return false;

  $.get("/ajax/usernameAvailable", {username: $("#username").val()}, function(data){
    if(data.available){
      $.get("/ajax/emailAvailable", {email: $("#email").val()}, function(data){
        if(data.available) {
          form.submit();
        }else{
          $("#notAvailable").html("Email already exists.").show().fadeOut(8000);
        }
      }, "json");
    }else{
      $("#notAvailable").html("This is username already exist.").show().fadeOut(8000);
    }
  }, "json");
  return false;
});

When the check finishes (comes back from the server), you'll either get an error, or the form will submit and move on. Also I changed $(loginForm above to not be wrapped again, judging by if((loginForm).valid()){ (if that isn't erroring), it's already a jQuery object.

Betard Fooser · Accepted Answer · 2010-11-09 14:15:43Z

2

you have a syntax error on your second line:

var = everythingIsOK = false;

should be:

var everythingIsOK = false;

could that be the issue?

answered Nov 9, 2010 at 14:15

Betard Fooser

5265 silver badges14 bronze badges

Add a comment |

Simon · Accepted Answer · 2010-11-09 14:15:05Z

1

var = everythingIsOK = false;

should be

var everythingIsOK = false;

I guess. Maybe that's a first problem?

answered Nov 9, 2010 at 14:15

Simon

4,5958 gold badges35 silver badges51 bronze badges

This isn't the issue, it's the fact that the calls aren't synchronous.
– Nick Craver
Commented Nov 9, 2010 at 14:19

Add a comment |

Sean Vieira · Accepted Answer · 2010-11-09 14:19:27Z

Instead of var = everythingIsOK = false; it should be var everythingIsOK = false;

Scope-wise, if that's not working, you can change it to be an attribute of an object var status = { everythingIsOK: false }; and change the value of that attribute.

However, you will need to always return false from your submit handler, because, as Nick points out, your get calls are asynchronous -- so they most-likely-will-not-have completed in time to prevent the form from submitting unless you do. (Take his advice and call submit manually from the interior get function's callback.)

Collectives™ on Stack Overflow

Javascript (jQuery) callback scope issue

4 Answers 4

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Related