javascript - variable scope

Question

This is a silly question, but I'm trying to use the contents from var form_data outside the ajax scope. How would I go about doing this? form_data only seems to exist inside the ajax function rather than outside even after declaring the variable outside of the ajax scope. I thought variables bubbled up until it finds where it was declared when var isn't defined.

To clarify my question, how do I use the results from the server outside the success function? I don't want to limit myself to doing everything inside the ajax success callback.

$(function () {

    var form_data; 

    $.ajax({
        type: 'GET',
        url: 'print_form.php',
        data: {
            //data sent to server
        },
        success: function (response) {
            form_data = JSON.parse(response);
            console.log(form_data);            //object is printed out as expected
        },

        error: function () {
            alert('AJAX failed for print_form');
        }
    });

    console.log(form_data);                    //undefined

});

form_data only gets assigned in the success function. Since its asynchronous, the console.log outside of the ajax function is still being called while the ajax request is happening — RSquared
– RSquared, Commented Feb 2, 2015 at 5:33
Start using done() .. See jQuery docs api.jquery.com/jquery.ajax — Daniel
– Daniel, Commented Feb 2, 2015 at 5:38

Md Ashaduzzaman · Accepted Answer · 2015-02-02 06:06:43Z

2

As AJAX stands for Asynchronous Javascript and Xml, so your code doesn't get blocked for an ajax operation being executed as it's asynchronous. In your case what happen is that when you are getting data through ajax your javascript doesn't stop continuing of execution and wait for the request to get success. Rather then that, while you are getting the data the rest of the code still gets executed. And that's why before you get the from the server through ajax request the form_data already gets printed outside of the ajax request scope.

Let's test it :

Try initializing form_data with any value. You'll find that now you won't get undefined outside the ajax where you printed the value. Rather you'll get the value you initialized the variable with.

edited Feb 2, 2015 at 6:06

answered Feb 2, 2015 at 5:42

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

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

3 Comments

jchi2241 Over a year ago

does this mean I'm forced to do everything I need to do with the response from AJAX within the success callback?

Md Ashaduzzaman Over a year ago

either you do it inside .success or you can get your rest of the code get executed when your are done with the response using .done

Md Ashaduzzaman Over a year ago

basically if you want to use a variable somewhere after you get it initialized by the response of server it's obvious to wait till you get the data. And as you are showing your data before it's getting response from the service you are getting it undefined.

Daniel · Accepted Answer · 2015-02-02 05:50:54Z

0

An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details. source: http://api.jquery.com/jquery.ajax/

Build your code as given in the docs:

I am having success with this setup that isolates the Ajax call.

function sendAjax(xhrdata) {


       return $.ajax({
        type: 'GET',
        url: 'print_form.php',
         data: xhrdata
        }).promise();

}

sendAjax(data).done(function(response) {
     form_data = JSON.parse(response);
     console.log(form_data); 
}

edited Feb 2, 2015 at 5:50

answered Feb 2, 2015 at 5:43

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

javascript - variable scope

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related