How to call JQuery function from JavaScript (after asynchronous call)

Question

The idea of the code I´m developing right now is extracting data from a JSON file (which I get from a server) and then show the results using a beautiful and nice graphic. The problem is I can't retrieve the object where I save the JSON results in the Jquery code so I can load them in the graphic. To simplify, my code is like this (Javascript part)

var obj; //I initialize it here in order to make it global though it doesn't work

function handle_json() {
  if (http_request.readyState == 4) {
     if (http_request.status == 200) {
      var json_data = http_request.responseText; 
      obj = eval("(" + json_data + ")");
      //at this point I have the information I want in "obj"
} else {
  alert("A problem ocurred.");
}
http_request = null;

} }

But now I want to send "obj" to my jQuery code so I can access to the information and show it. But if try this (jQuery part)

$(function () {
 alert(obj.results.bindings[0].a.value); //<-- this doesn't work, obj isn't initialized
var fert = [];
fert = [[1990, 1.28], [1995, 1.25], [2000, 1], [2005, 1.3], [2010, 1.83]];

var plot = $.plot($("#placeholder"),
       [ { data: fert, label: "Fertility"} ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 2}
         });

I see what the problem is, I've made an asynchronous Ajax call and I need to execute jQuery right after I evaluate de json info ( obj = eval("(" + json_data + ")") ) but I just don't know how! If it helps I've used a library called "flot" to do the graphics. Thanks a lot! Any help would be apreciated :)

Answer 1

Currently your jQuery code is in a document ready handler, so (obviously) it runs as soon as the document is ready - timing that isn't related to your Ajax call at all. Instead, put your jQuery code in its own function and call it from right after you set obj . Or just move the jQuery code directly into the function where you set obj :

  var json_data = http_request.responseText; 
  obj = eval("(" + json_data + ")");
  //at this point I have the information I want in "obj"
  // either process obj directly here, or call a function to do it...
  processData(obj);

  ...

  function processData(obj) {
     // your jQuery code here, using obj
  }

Better though, since you're using jQuery anyway, would be to do the Ajax with one of jQuery's Ajax functions . I'd suggest $.getJSON() .

$.getJSON("yourURLhere", function(obj) {
    // your jQuery code using obj here
});

Answer 2

When you use jQuery's AJAX calls, you can provide a function to execute after the data has been received. It even has a variant that automatically parses JSON, like this:

$.getJSON(url, options, function(response) {
    ... do something with the data ...
});