passible to pass $.ajax inside variable value to global?

Question

Is there a way to pass the test value from ajax function to global?

$('button').on('click', 'loader', function(){
    $.ajax({
          url: 'www.myweb.com/string/index.html',
          type: 'get',
          dataType: 'html',
           success: function(data){ 
             var test = true;
           },
            error: function(data){
              var test = false;

           }
});

var test;

my console.log shows undefined

Welcome to the wonderful world of **async**! You can't do that. (also, that's a _local_ variable) — SLaks, May 25 '14 at 02:57

score 0 · Answer 1 · answered May 25 '14 at 02:58

0

Just don't use the var keyword inside the ajax callbacks when setting test's value.

answered May 25 '14 at 02:58

mclaassen

5,018
4
30
52

thanks, I've tried without `var` but still cant get the right value; – olo May 25 '14 at 03:05

Andrew Shepherd · Accepted Answer · 2014-05-25T03:30:43.027

0

There are two problems here:

Inside your success handler, you are redefining test with the var keyword. This is now using a new variable named test that is scoped for just your success handler.

Remove the var keyword. Then it will look for a variable named test in the outer scope, searching progressively outward until it either finds a variable named test, or fails to find one in which case it will create a new variable attached to window.

Your second problem is that ajax is asynchronous by default. That means it would not be calling test = true until all of the subsequent code has finished running. If you are examining the value of test immediately after the ajax call, then it will be undefined because the done hasn't been called yet.

For this simple example, make the call synchronous, by setting the async property to false.

// Do you want to use the text within this scope?
// If not, remove this declaration, and then it really will be
// window.test
var test;

$('button').on('click', 'loader', function(){
    $.ajax({
          url: 'www.myweb.com/string/index.html',
          type: 'get',
          async: false,
          dataType: 'html'
}).done(function() {
     test = true;
}).fail(function() {
    test = false;
});

edited May 25 '14 at 03:30

answered May 25 '14 at 02:58

Andrew Shepherd

44,254
30
139
205

1

no mention of `async` this time? Doing this in without it is probably worse then the use of `async` – MattSizzle May 25 '14 at 03:01
@Matt Green: Actually, I believe this would use the `test` that is declared after the ajax method call, because, chronologically, the declaration will run before the `success` method is called. This is slightly confusing code, but not actually incorrect :-) – Andrew Shepherd May 25 '14 at 03:09
Thanks for the answer! @AndrewShepherd Copied twice for a reason? and still get `undefined` – olo May 25 '14 at 03:11
@olo Actually, @Matt Green is correct, it should set `async` to false. I'll modify my answer. – Andrew Shepherd May 25 '14 at 03:13
1

@AndrewShepherd actually, it doesn't matter where the variable declaration is placed, see [`var` hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting). – Fabrício Matté May 25 '14 at 03:14
@FabrícioMatté Thanks, I didn't actually know that. – Andrew Shepherd May 25 '14 at 03:18
Thanks guys!! may need to think a better solution as `async: false` – olo May 25 '14 at 03:22
1

@olo see if it helps - http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Fabrício Matté May 25 '14 at 03:23
@AndrewShepherd, I did not mean it was incorrect, but what if another function is called while the `Ajax` promise is still not resolved that expects `test` to have the "new" value. It could cause very unexpected behavior – MattSizzle May 25 '14 at 03:29

passible to pass $.ajax inside variable value to global?

2 Answers2

Linked