1

Is it possible to assign data to a global variable from a jquery get? Here is a very simplified version of what I am trying to do.

    var page;
    $.get( "view/tenantHome.html", function(data){page = data;});
    console.log(page);
3
  • 1
    I don't see why not; did it not work? Commented Jan 11, 2014 at 17:24
  • Yes, You can assign return value to global variable Commented Jan 11, 2014 at 17:24
  • 1
    Yes, it is, but the issue is that Ajax is asynchronous by nature. There is no guarantee the call will return before the console.log() line. In fact, 99.9% of the time it won't. Commented Jan 11, 2014 at 17:26

5 Answers 5

4

Try to print the value inside the function

$.get( "view/tenantHome.html", function(data){
    page = data;
    console.log(page);
});
Sign up to request clarification or add additional context in comments.

Comments

1

with AJAX you have always to use a callback like

function callback(data){
     console.log(data);
};
$.get( "view/tenantHome.html", function(data){callback(data)});

Comments

1

There are 2 ways

Async (recommended):

var page;
$.get( "view/tenantHome.html", function(data){
    page = data;
    console.log(page);
});

Sync (not recommended);

$.ajaxSetup({async: false});
var page;
$.get( "view/tenantHome.html", function(data){ page = data; });    
console.log(page);
$.ajaxSetup({async: true});

The second one is not recommended because it will block script execution until the ajax call finishes. However, there are some cases when you might need it.

Hope this helps. Cheers

Comments

0

The $.get is a shorthand method for doing AJAX in jQuery. These methods are asynchronous by default, so what you're running in to can be called a race condition. I think you'll want to read up on these concepts as you continue developing in jQuery and use AJAX.

$.get has an option for a callback parameter which will get called once the response is received, that callback is shown in your original code.

var page;
$.get( "view/tenantHome.html", function(data){page = data;});
console.log(page);

You can do something simple like encapsulate the code that depends on the page variable in a function.

var page;
$.get( "view/tenantHome.html", function(data){
    page = data;
    codeThatDependsOnPageVariable();
});

function codeThatDependsOnPageVariable() {
    console.log(page);
}

In that way you can call the code block once you have ensured you have the necessary data.

Comments

0

.get() function returns deferred object which contains callbacks .done(), .fail(), .always(). Now you handle only done callback and you don't know about fails. Use this:

$.get('view/tenantHome.html').done(function(result){
   page = data;
   console.log(page);
}).fail(function() { console.log('Request fail'); });

Now you can handle fails. Never use async: false in production, while request in progress your page will frozen, and often all tabs in browther is frozen.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.