Ajax asynchronous call - how to overcome this?

Question

I'm New to JS - just want to start with that.

Look at this simple example, where i want to draw X number of gauges, where X is taken from the JSON via Ajax call.

<body>
<div id="gServer"></div><BR>

<script type="text/javascript" language="javascript">
/*
 * Obtain number of sessions and Server Status
 * Number of sessions is used to draw gauge per session
 */
$.ajax({
   url: url,
   dataType: 'json',
   data: jd,
   success: function(data)
   {

       //
       Server_CpuCount = data.Server_Cpu_Count;
       Server_LoadAverage = data.Server_Load_Average;
       Server_Sessions = data.Server_Sessions_Count;

       // Create Gauge for every session connected
       for (i = 0; i < Server_Sessions; i++)
       {
        arr.push(new JustGage({
                         id: "g"+i,
                         value: parseFloat(data[i].Session_Load_Average).toFixed(2),
                         min: 0,
                         max: data[i].Session_Cpu_Count,
                         title: data[i].Session_Name,
                         label: "load"
                         }));
       }

       // Create main Server Gauge
       gServer = new JustGage({
                          id: "gServer",
                          // truncate to 2 digits
                          value: parseFloat(Server_LoadAverage).toFixed(2),
                          min: 0,
                          max: Server_CpuCount,
                          title: "GridMan Server",
                          label: "load average"
                          });
   }
   });

// Write out label
document.write(Server_Sessions + "<p>sessions</p><BR>");

// Render All Sessions Gauges
// !! It does not work, ajax is async and Server_Sessions is 0
for (i = 0; i < Server_Sessions; i++)
{
    document.write("<div id=\"g"+i+"\"></div>");
}
</script>
</body>

This part doesn't work, as AJAX is spawned asynchronously therefore Server_Sessions is always 0 !

 for (i = 0; i < Server_Sessions; i++)
    {
        document.write("<div id=\"g"+i+"\"></div>");
    }

How can i draw gauges for sessions if this variable is always 0 ?

Oh, and [don't use `document.write`](http://stackoverflow.com/q/802854/1048572), it won't work in the callback anyway. — Bergi, Jan 14 '15 at 21:08
possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — JJJ, Jan 14 '15 at 21:28

score 0 · Answer 1 · answered Jan 14 '15 at 20:59

0

Display your gauges for 0 sessions initially, and update them with the correct number in the success callback function of your ajax call. This is where you know that you got data. If you don't want users to see 0 gauges, then hide them until the success callback and show them again there.

answered Jan 14 '15 at 20:59

James Waddington

2,894
2
15
24

What do you mean 'update them'. If i display no gauges (meaning i don't include
) java script is popping an alert saying g0,g1,g2 (which are gauges) is not defined.
– PeeS Jan 14 '15 at 21:11
Perhaps create an empty container div and give it an id. Move your render code to a function so it doesn't run on page load, and instead of document.write use document.getElementById("wrapper").innerHTML = ... or similar. Call that in your success callback to render the gauges. – James Waddington Jan 14 '15 at 21:27
Dis something similar, but putting $("body").append("
"); in the ajax callback function, well that worked at least. – PeeS Jan 14 '15 at 21:28

score 0 · Accepted Answer · answered Jan 14 '15 at 21:26

Fixed this by using a callback function within ajax call.

$.ajax({
       url: url,
       dataType: 'json',
       data: jd,
       success: function(data)
       {

       //
       Server_CpuCount = data.Server_Cpu_Count;
       Server_LoadAverage = data.Server_Load_Average;
       Server_Sessions = data.Server_Sessions_Count;
       // Create main Server Gauge
       gServer = new JustGage({
                              id: "gServer",
                              // truncate to 2 digits
                              value: parseFloat(Server_LoadAverage).toFixed(2),
                              min: 0,
                              max: Server_CpuCount,
                              title: "GridMan Server",
                              label: "load average"
                              });

       // Create Gauge for every session connected
       for (i = 0; i < Server_Sessions; i++)
       {

        // **Add Gauge on to the web page**
        $("body").append("<div id=\"g"+i+"\"></div>");

        arr.push(new JustGage({
                             id: "g"+i,
                             value: parseFloat(data[i].Session_Load_Average).toFixed(2),
                             min: 0,
                             max: data[i].Session_Cpu_Count,
                             title: data[i].Session_Name,
                             label: "load"
                             }));
       }
       }
       });

Ajax asynchronous call - how to overcome this?

2 Answers2