$.getJSON function executed after everything else

Question

I'm using the following code:

function eventListenerTest(event) {
    if (document.getElementById('gem_cvo_select_list')) {
        var address;
        $.getJSON(url, function (data) {
            address = data.rows[0];
            alert("This gets executed afterwards");
        });
        alert("This gets executed first");
        event.infoWindowHtml = "<b>Address: </b>" + address;
    }
}

Problem is the $.getJSON function gets executed after the 'address' variable is used in the infoWindow. Modified the code like this:

function eventListenerTest(event) {
    if (document.getElementById('gem_cvo_select_list')) {
        var address;
        $.getJSON(url, function (data) {
            address = data.rows[0];
            event.infoWindowHtml = "<b>Address: </b>" + address;
        });
    }
}

The 'event' object doesn't seem to be accessible this way (nothing is displayed in the Google Maps infoWindow). I figured I should be able to pass 'event' to the function inside the JSON but I have no idea how to accomplish this.

Answer 1

Try this:

function eventListenerTest(event, callback) {
    if (document.getElementById('gem_cvo_select_list')) {
        var address;
        $.getJSON(url, function (data) {
            address = data.rows[0];
            event.infoWindowHtml = "<b>Address: </b>" + address;
            callback();
        });
    }
}

Then:

eventListenerTest(event, function(){
     // you will use updated event object here
});

Answer 2

You should use $.proxy method to make sure that the callback function that gets executed keeps the context of the function creating the Ajax call.

Updated Javascript:

function eventListenerTest(event) {
    if (document.getElementById('gem_cvo_select_list')) {
        var address;
        $.getJSON(url, $.proxy(function (data) {
            address = data.rows[0];
            event.infoWindowHtml = "<b>Address: </b>" + address;
        },this));
    }
}

More information: http://api.jquery.com/jQuery.proxy/