How to create DOM elements on $.Ajax() Success using jquery ?

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 
    });
});

Answer 2

The reason you don't have anything in the log is because $.ajax is asynchronous (the first 'A' in AJAX stands for 'Asynchronous'). Meaning that when you call your load() function, it fires off the $.ajax call, but does not wait for the $.ajax call to return before load() returns (this is why you must specify a success and error function so it know what to do when it actually does return).

We can look at a timeline of how your code gets executed:

1. load()
   1. $.ajax()
   2. return (null)
2. console.log()
3. (some indeterminate time later) success()

$.ajax() returns a type of object that knows when it has returned from it's call. Therefore you can call .done() on the object and execute code in that function that will wait until after the success() has run.

therefore if you return the $.ajax call you will be able to call .done() and do things with your newly-added inputs.

function load() {
    return $.ajax({...});
}

$(document).ready(function () {
    load().done(function(){
        console.log($('#tools :checkbox'));
    });
});