How to add the value of a variable to my HTML?

Question

I have 2 separate instances in which I show Data from JavaScript in a heading on my page:

Html:

<h2 id='Fetch_Header' style="color:white; font-family: arial;">
    The last time you fetched your games was:<span class="last_fetch" style="font-weight: bold;"></span>
</h2>

jQuery:

$.get('php/FetchGames/LastFetch.php', function (data) {
    if (data == "Never") {
        var lastdate = data;
        $('.last_fetch').html(" " + lastdate);
    }

more jQuery:

$.get('php/FetchGames/GetMatchCount.php', function (data) {
    MatchCountJson = data;
    MatchCountJson_Parsed = JSON.parse(MatchCountJson);
    MatchCount = MatchCountJson_Parsed.Int;
    //the above JSON is {"Int":72}
});

$('#Fetch_Header').html('Time to apply your MMR, follow the instructions below. Matches left to apply: ' + MatchCount);

However only the former works (The lastdate one).

First Output:

date (as expected)

Second Output:

"Time to apply your MMR, follow the instructions below. Matches left to apply: undefined"

Both of the variables are not null/undefined, since if I use Console.log, then the lastdate is a date, and the Matchcount is an integer (for example 32).

Since jQuery is asynchronous the fetched value might not be available when the HTML is applied to #Fetch_Header — Jay Blanchard, Feb 27 '14 at 18:19
`.get` is asynchronous. That's what the `A` in `AJAX` stands for. So the callback (where you assign a value to `MatchCount`) won't be called until the AJAX call completes which may be some time in the future. So when you execute the next line (the `.html`) one, `MatchCount` isn't defined. — Matt Burland, Feb 27 '14 at 18:21
`$.get` is still processing when you are trying to access the `MatchCount` variable. In your first example you are using the variable in the callback, in your second example you are using it outside your callback. That's why example 2 doesn't work. — Nope, Feb 27 '14 at 18:26

score 5 · Accepted Answer · answered Feb 27 '14 at 18:19

5

Matchcount is outside of the scope of your code when you try and use it.

.get() is an asynchronous call, meaning it is not guaranteed to be complete when the next instruction is executed. If you want to use anything based on data, it needs to happen within the scope of the callback function in the get() call.

$.get('php/FetchGames/GetMatchCount.php', function(data){
    MatchCountJson = data;
    MatchCountJson_Parsed = JSON.parse(MatchCountJson);
    MatchCount = MatchCountJson_Parsed.Int;

    // Call must be inside of "get()" callback
    $('#Fetch_Header').html('Time to apply your MMR, follow the instructions below. Matches left to apply: '+MatchCount);
});

answered Feb 27 '14 at 18:19

Jeff B

29,943
7
61
90

This was exactly it. Damn. I'm not quite used to the Asynchronous nature of Javascript. I'm new to coding and my brain feels like it would follow the instructions in order. Thanks a lot. – k4kuz0 Feb 27 '14 at 18:21
1

JavaScript is not asnychronous, get is a AJAX method of jQuery – Feb 27 '14 at 18:23
2

@k4kuz0 Like Daniel said, it is not JS that is asynchronous, per se. When you call `get()`, it is executed immediately, the request is sent for your URL, and the callback (`function(data)...`) is *registered* (saved). Basically, that function is saved away until the network returns your URL, at which point the current JS flow is interrupted, and your callback is executed with the returned data as an argument. If this code was synchronous, and waited to continue until the URL was returned, your code would noticeably hang, even on a moderately slow network. That's the beauty of AJAX. – Jeff B Feb 27 '14 at 18:41

score 1 · Answer 2 · answered Feb 27 '14 at 18:20

You can only use your MatchCount variable in the result of the get method. Try this

$.get('php/FetchGames/GetMatchCount.php', function(data){
    MatchCountJson = data;
    MatchCountJson_Parsed = JSON.parse(MatchCountJson);
    MatchCount = MatchCountJson_Parsed.Int;
    //the above JSON is {"Int":72}

    $('#Fetch_Header').html('Time to apply your MMR, follow the instructions below. Matches left to apply: '+MatchCount);
});

coder29 · Answer 3 · 2014-02-27T18:32:53.060

The issue is the scope of the data passed back from the server so your second html insert cannot access MatchCount. Change your code to this:

 $.get('php/FetchGames/GetMatchCount.php', function(data){
    MatchCountJson = data;
    MatchCountJson_Parsed = JSON.parse(MatchCountJson);
    MatchCount = MatchCountJson_Parsed.Int;
    //the above JSON is {"Int":72}
    $('#Fetch_Header').html('Time to apply your MMR, follow the instructions below.        Matches left to apply: '+MatchCount);
});

How to add the value of a variable to my HTML?

3 Answers3