javascript global variable not updating in ajax callback

Question

On alert it always alerts jojo. The test2.php have text Loco

The div gets updated to Loco but the global variable is not changing. I tried window.temp = data but it didn't worked.

How can i get the returned value in variable? please Guide...

<div>
yolo
</div>

<script type="text/javascript">
    var temp = 'jojo';

        $.ajax({
            url: 'test2.php', //Loco
            success: function(data)
            {
                    temp = data;
                    $('div').html(data);
            },
            error: function (err)
             {
                 alert('error');
             }
        });

       alert(temp);
       var toBeUsedLater = temp; //updated temp value from ajax call
       refreshTab();
</script>

Bsien. I suggest you read about asynchronous behaviour of ajax. — The Code, Jun 10 '15 at 16:48
okay, i got a lot of useful information from this. i'm beginner in javascript so it helped a lot. i think i have to go with `async: false` option for my current situation. — Abdul Rehman, Jun 10 '15 at 17:28
`async: false` makes the ajax synchronous but it is not used in most cases becuase it pauses the execution until the ajax returns and the page might freeze. So better place to put the staement `var toBeUsedLater = temp;` is either in `success` callback(where you are setting innerhtml) or in some promise hook. You may read about jquery promises. — The Code, Jun 13 '15 at 18:22

score 4 · Accepted Answer · answered Jun 10 '15 at 16:47

This is an asynchronous function. (That's what the A in AJAX stands for.) You are alerting the value of temp immediately , so it is happening before the asynchronous call has finished. If you add

alert(temp);

To the end of your success handler, you will see the value has updated.

score 1 · Answer 2 · edited May 23 '17 at 12:21

1)change var temp = 'jojo' to 'temp = 'jojo'

As this is not tied down to the execution context and not limited to files (has pluses and minuses - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

2) The problem is that the alert is called before the callback. Move the alert into the function. As the ajax is called asynchronously, meaning the success and error functions are called, only when the ajax gets the response back from the server, while the alert you have now will be called right away.

http://javascript.about.com/od/ajax/a/ajaxasyn.htm

 $.ajax({
            url: 'test2.php', //Loco
            success: function(data)
            {
                    temp = data;
                    $('div').html(data);
                    alert(temp).
            },
            error: function (err)
             {
                 alert('error');

             }
        });

3) alternatively you could set the async of the ajax to false: What does "async: false" do in jQuery.ajax()? Which will cause the Ajax call will finish before the next line of code, but it is highly recommended not to do that.

removing `var` isnt really necessary as its not scoped directly in any function, so it automatically becomes the global variable, but rest your answer is true. — vinayakj, Jun 10 '15 at 16:50
@vinayakj that's true as long as you don't split into multiple files, then it becomes and issue, that's why it's safer not to use the var. — Dory Zidon, Jun 10 '15 at 16:55

score 1 · Answer 3 · answered Jun 10 '15 at 16:48

AJAX - asynchronous means you are not waiting for response to come and Javascript is interpreted language executed one line after another line. So here the alert(temp) would be executed first and then the success callback as it takes some time to get the response.

score 1 · Answer 4 · edited Jun 09 '21 at 08:27

1

Just add async: false in your ajax options.

edited Jun 09 '21 at 08:27

Tomerikoo

18,379
16
47
61

answered Jun 09 '21 at 08:22

Albert Logic Einstein

705
9
17

Hi, thanks for the input, I was noob back then & didn't knew concept of asyn calls. You didn't provide any conclusive information of adding that code & what effects wil it make on the app. This has side effects & important to be aware of. And there is deprecation as well, docs can shine more on it. The above answers already have good information, and what was good for me was to understand the working of ajax & async behavior, which helped me a long way ahead. Cheers. – Abdul Rehman Jun 09 '21 at 10:46

javascript global variable not updating in ajax callback

4 Answers4