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
– The Code, Commented Jun 10, 2015 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
– Abdul Rehman, Commented Jun 10, 2015 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
– The Code, Commented Jun 13, 2015 at 18:22

Vince · Accepted Answer · 2015-06-10 16:47:39Z

4

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.

answered Jun 10, 2015 at 16:47

Vince

3,3181 gold badge20 silver badges30 bronze badges

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

Comments

vinayakj · Accepted Answer · 2015-06-10 16:48:59Z

1

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.

answered Jun 10, 2015 at 16:48

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:21:49Z

1

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.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jun 10, 2015 at 16:48

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

2 Comments

vinayakj Over a year ago

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.

Dory Zidon Over a year ago

@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.

Tomerikoo · Accepted Answer · 2021-06-09 08:27:37Z

1

Just add async: false in your ajax options.

edited Jun 9, 2021 at 8:27

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Jun 9, 2021 at 8:22

Adison Masih

84411 silver badges18 bronze badges

1 Comment

Abdul Rehman Over a year ago

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.

Collectives™ on Stack Overflow

javascript global variable not updating in ajax callback

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related