Question

i’m creating a dynamic list of checkbox on $.ajax :

 function load() {
        $.ajax({
            type: "POST",
            url: "*************",
            data: "************",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            error: function (x, e) { alert(e.responseText); },
            success: function (objTrendList) {
                $.each(objTrendList, function (index, value) {
                    // append the checkbox panels to tool div 
            $('#tools').append('<input type="checkbox" id="checkbox_' +
            value.LngTrendID + '" checked="checked" value="0" />&nbsp;<div 
            style="display:inline;">' + value.StrTrendName + '</div><br />');

                });
             } 
        });
    }
    $(document).ready(function () {
        load();
        console.log($('#tools :checkbox')); // i know I don't get any thing here 
        because the this line is called before the ajax function 

    });

i know I don’t get any thing with the console.log line because the this line is called before the ajax function

Question How can i load the ajax function first i though when i do $(document).ready() it will run last
Thanks

Answer 1

Return the ajax call and use the already built in deferred object in $.ajax :

function load() {
    return $.ajax({
        type: "POST",
        url: "*************",
        data: "************",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        error: function (x, e) { alert(e.responseText); },
        success: function (objTrendList) {
            $.each(objTrendList, function (index, value) {
                // append the checkbox panels to tool div 
        $('#tools').append('<input type="checkbox" id="checkbox_' +
        value.LngTrendID + '" checked="checked" value="0" />&nbsp;<div 
        style="display:inline;">' + value.StrTrendName + '</div><br />');

            });
         } 
    });
}
$(document).ready(function () {
    load().done(function() {
        console.log($('#tools :checkbox')); // i know I don't get any thing here 
    });
});