Calling jQuery Function with Javascript Function

Question

Having some trouble getting this to work, specifically with $.getJSON(). I want to wrap the getJSON function from jQuery in a Javascript function like so:

function reload_data() {
    $.getJSON("data/source", function(data) {
        $.d = data;
    });
}

But when I call reload_data() it doesn't execute the jQuery function inside. Any ideas?

Answer 1

Put an Alert in side the function to know its getting called.

and a try catch around the jQuery call to see if there is an error

function reload_data() {
    alert('reload_data  start');
    try{
        $.getJSON("data/source", function(data) {
            $.d = data;
        });
     }
     catch (ex){
         alert ('error in jQuery call:' + ex)
     }
}

Answer 2

You're not telling us enough. I will just take a guess!

If you are calling this function, and then immediately checking $.d for the results, that is not going to work because you don't allow time for the asynchronous AJAX request to complete...

reload_data();
alert($.d); // What?!  It's not displaying the updated results?!

You'll have to utilize a callback structure, like jQuery uses, in order to make it work...

reload_data(function() {
  alert($.d);
});

function reload_data(func) {
  $.getJSON("data/source", function(data) {
    $.d = data;
    //Execute the callback, now that this functions job is done
    if(func)
      func();
  });
}

Answer 3

Thanks for the help everyone, but the solution was actually really simple. It was just a matter of synchronization. The page was reloading before the JSON data got reloaded, so that's why I wasn't seeing an error.