Question

I clearly do not understand jQuery asynchronous execution properly. I have the following issue. I have a function that changes a select list as follows:

function loadGroups() {

$.getJSON("/Process/ShowGroups", null, function (data) {
    var selectList = $("#groupsList");
    selectList.empty();
    $.each(data, function (index, optionData) {
        var option = $('<option>').text(optionData.Text).val(optionData.Value);
        selectList.append(option);
    });
});
$("#groupsList").trigger("liszt:updated");
}

I am using a control which needs to be alerted AFTER the list has been updated so that it can refresh the contents. I need to trigger

$("#groupsList").trigger("liszt:updated");

Now this seems to make sense to me but I was informed that this is a part of the same callback and I need to move it to the end of the callback function. Fair enough, I then tried this:

loadGroups();
$("#groupsList").trigger("liszt:updated");

Which seems like it should work. The loadGroups() does the change. Shouldn’t the callback be done after the function is called? What am I missing? How can I ensure that the loadGroups is done before I trigger the event?

Answer 1

You should trigger it in the getJSON callback. Try this

function loadGroups() {

$.getJSON("/Process/ShowGroups", null, function (data) {
    var selectList = $("#groupsList");
    selectList.empty();
    $.each(data, function (index, optionData) {
        var option = $('<option>').text(optionData.Text).val(optionData.Value);
        selectList.append(option);
    });
    $("#groupsList").trigger("liszt:updated");
});

}