无法更改

Question

I have a javascript function that creates a lot of panels using an ajax request. After the request gives me a valid json, I populate all the widgets like this:

function createAllWidgets() {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

I have another function that changes the .text() of some of the div objects within the widget:

function setWidget(priceUSD, priceEUR, widget) {
    $('#' + widget + '-EUR').text(priceEUR);
    $('#' + widget + '-USD').text(priceUSD);
}

For some reason the id can not be found/used when populated with ajax. When the widget is not created with ajax (but in static html) it does work..

EDIT: I made a callback in the function that generates the widgets:

function createAllWidgets(callback) {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

Then I made a new function to call the above two functions:

function initStart() {
    createAllWidgets(function() {
        setWidget(1,1,'widget1');
    });
}

But this still doesn't work..

Answer 1

ajax is asynchronous, meaning that the done handler will be called after the function returns. Your solution of adding a callback doesn't work because you haven't called it.

If you still want to use a callback, add this:

$('#widgets').html(html); // This is yours
callback();               // <- Add this

A better way, is to use the jqXHR events - like done:

function initStart() {
    createAllWidgets().done(function() {
        setWidget(1,1,'widget1');
    });
}