Can't use a global variable from JS with AJAX call in other script element on same html page

Question

I've been looking around as to how to use a variable from one script on a page and use it in another script. I've found that you can set your variable to global (although this is not preferred, but I havn't found a better way).

I am using the Bootstrap framework.

On my page, I have an AJAX call in a function. I have declared the variable in front on the function so that it is a global variable. The value of the variable is set in the success function of the AJAX call.

In another script (inside a modal) I then use the variable to output as text. This works when I set the value of the variable outside the AJAX function, but it gives value='undefined' when the value is set in the AJAX success.

The modal in which the variable is used is only opened after the AJAX success function, but maybe the value is already read before the AJAX request, even when the modal is not shown? Is there a way to say that it only has to be loaded after the AJAX success function?

This is an abstract of my code for the AJAX function:

<script type="text/javascript">
var theVariable;
function() {
    //AJAX Call
    $.ajax({
        //Abbreviated
        success: function(data) {
            theVariable = "test";
        }
    });
}

Here is the code I use in the modal to read the variable

<p id="demo"></p>
<script>
     document.getElementById("demo").innerHTML = theVariable;
</script>

So to recap, when I set the value of theVariable while declaring it (outside of the AJAX function), the value is displayed in the modal. However, when I try to set the value inside the AJAX success function this value is undefined.

htshame · Accepted Answer · 2018-03-01 11:52:16Z

2

It happens because theVariable is outside the scope of $.ajax().

This should work:

var theVariable;
function() {
    var that = this;
    //AJAX Call
    $.ajax({
        //Abbreviated
        success: function(data) {
            that.theVariable = "test";
        }
    });
}

answered Mar 1, 2018 at 11:52

htshame

7,4655 gold badges43 silver badges66 bronze badges

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

7 Comments

Bobray Over a year ago

Thanks! In the second script, can I use that.theVariable then? I tested an alert in the ajax success call on theVariable and that is able to read it, so I didn't think it would be outside the scope

htshame Over a year ago

No, you don't need that.. You should be able to use theVariable as you do now.

Bobray Over a year ago

I tried it and it just shows up empty inside the modal, so instead of 'undefined' it now shows nothing. I still think it might have something to do with the modal content somehow being created before the ajax success function.

htshame Over a year ago

It's possible. So you need to find a way to update your modal window content. I can't tell you how to do it, relying on the information you've provided.

Bobray Over a year ago

Thanks for your answer, it was realy helpfull on the ajax scope part. I think i'm going to rewrite my code so that the content of the modal is set in the ajax success funtion. That way I'm sure the variable is available

|

Collectives™ on Stack Overflow

Can't use a global variable from JS with AJAX call in other script element on same html page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related