Use javascript variable outside success function

Question

I have used jquery validation to validate email. But the variable whose value is changed in success function is not accessible outside it. It can be done with async=false, but that destroys the purpose of Ajax.

Below is the code:

$.validator.addMethod('verifyemail',function(value,element){        
    $.ajax({
        type: "POST",
        url : $.app.urls('base_url')+'account/check_email',
        data: {'email' : value},
        success: function(msg){
            //If email exists, set response to true
            if( msg.status == 'false' )
                respond = false;
            else
                respond = true;
        }
    })
    console.log(respond);
    return respond;
}, "Email is Already Taken");

Problem: Trying to use undefined variable. Explanation: AJAX request will take some time, you can't read results right after $.ajax call. Solution: Event driven program flow, separate validator methods and AJAX requests. Check for valid and default to invalid. — Sampo Sarrala
– Sampo Sarrala, Commented Sep 28, 2013 at 19:25

jrthib · Accepted Answer · 2013-07-17 05:21:42Z

4

You can't set the value in an asynchronous function like that. The way in which this works is that respond would be set to a value. Then your asynchronous ajax call would fire off, as soon as it fires off the rest of the code below your ajax call would execute. Once the ajax call returns, the code in the success callback will be executed. Most likely, by this time your validator function would have finished executing.

Since you're using this ajax call in a validator, you would want to run this in series since the validation depends on the result of your ajax call. You could accomplish this by setting async: false.

Here is a useful resource on asynchronous callbacks and how they work:

http://blog.parse.com/2013/01/29/whats-so-great-about-javascript-promises/

And another covering jQuery's AJAX function async vs sync:

http://net.tutsplus.com/tutorials/javascript-ajax/event-based-programming-what-async-has-over-sync/

edited Jul 17, 2013 at 5:21

answered Jul 17, 2013 at 5:15

jrthib

1,3191 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tiny Jaguar Over a year ago

I know about aync:false, but wouldn't that ruin the use of Ajax?

jrthib Over a year ago

It would only defeat the purpose of running the function asynchronously, but since you need the result of the http request to determine the validation, you need to run it in series.

Tiny Jaguar Over a year ago

Welcome for a detail overview of everything required

Tiny Jaguar Over a year ago

The async:false stops all other validation, what to do?

jrthib Over a year ago

Could you post more of a code sample on something like jsfiddle.net? I can probably help you more if I can see the validators

NeoWang · Accepted Answer · 2013-07-17 05:19:33Z

1

Ajax call is asynchronous, meaning when you call console.log(respond); The variable respond is still not available. If you need to access it outside the success function, you can trigger a custom event and get respond in the event handler.

And of course, you have to put respond in outer scope.

answered Jul 17, 2013 at 5:19

NeoWang

18.8k24 gold badges87 silver badges134 bronze badges

5 Comments

Tiny Jaguar Over a year ago

Example if possible please

NeoWang Over a year ago

I think jquery.validator is mostly for client side validation. Since form validations are done both on client and server side, I suggest you post(ajax) the form and show the returned error if any. Using ajax in sync mode locks the browser, giving bad user experience.

Tiny Jaguar Over a year ago

That's the problem I am facing just now

NeoWang Over a year ago

If you don't use jquery.validator there is no problem. That's what I am saying.

Tiny Jaguar Over a year ago

But that's the main requirement

user70585 · Accepted Answer · 2014-02-14 01:07:21Z

0

respond is already a global variable (lack of var keyword), but the asynchronous nature of AJAX means that it won't necessarily be available when the following lines run, so you need to sequence it in one of a few ways

Make it synchronous (but the question rules that out)
put the responding code inside of the same anonymous function
You could also make a while loop that spins until respond is set, but that would probably be a poor solution.

Hope that helped

answered Feb 14, 2014 at 1:07

user70585

1,4191 gold badge15 silver badges20 bronze badges

Comments

Loken Makwana · Accepted Answer · 2013-07-17 05:22:59Z

-1

to access the respond variable you need to either define it in upper scope

$.validator.addMethod('verifyemail',function(value,element){        
    var respond = true; // scope of variable to current function
    $.ajax({
        type: "POST",
        url : $.app.urls('base_url')+'account/check_email',
        async: false,  
        data: {'email' : value},
        success: function(msg){
            //If email exists, set response to true
            if( msg.status == 'false' )
                respond = false;
            else
                respond = true;
        }
    })
    console.log(respond);
    return respond;
}, "Email is Already Taken");

edited Jul 17, 2013 at 5:22

answered Jul 17, 2013 at 5:10

Loken Makwana

3,8482 gold badges23 silver badges14 bronze badges

3 Comments

Loken Makwana Over a year ago

ok got it, there is issue with async nature, please check updated answer

Tiny Jaguar Over a year ago

@jrthib had already given the answered before you pointed out the aync nature. So I have ticked there.

Sampo Sarrala Over a year ago

-1 for switching to synchronous mode instead of trying to solve main problem.

Collectives™ on Stack Overflow

Use javascript variable outside success function

4 Answers 4

5 Comments

5 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related