Вместо этого попробуйте этот подход, загружая JSON после таблицы на месте ... также я немного очистил общую структуру:
if (currentProdSelectValue === "Candy" && currentAppSelectValue === "Candy Store") {
$('#page_content').children().fadeOut('slow');
$('#page_content').load('page_eleven_new.html', function() {
$.getJSON('js/page_eleven.js', function(data){
var cat = ['dataDaily', 'dataMonthToDate', 'dataYearToDate'];
var fields = ['timeScope', 'lemonHmarsBarss', 'snickers',
'cottonCandy', 'marsBars', 'babyRuth', 'nerds',
'atomicFireBalls', 'fruitStripeGum'];
for(var c = 0; i < cat.length; c++) {
$('table#table_first_row tr').eq(c).children().each(function(j, td) {
$(this).html(data.candy[cat[i]][fields[j]]);
});
}
});
}).hide().fadeIn('slow');
}
Этот подход циклически повторяется, хотясвойства, в JavaScript data.candy.dataDaily.timeScope могут быть записаны как data.candy['dataDaily']['timeScope'], которые вы можете использовать здесь в своих интересах, указав эти имена один раз и просто просматривая эти свойства ... как вы можете видеть выше, это экономит лишь немного кода;)
Важной частью является то, что $.getJSON() работает как обратный вызов к .load(), гарантируя, что таблица есть, и эти селекторы находят что-то длязаселить ... что не так в настоящее время.Теперь вы видите пустую таблицу, потому что они иногда загружаются не по порядку ... это предотвращает это.
В качестве альтернативы, вы все равно можете загрузить оба, установить data в глобальную переменную, использовать событие .ajaxStop() и выполнить заполнение таблицы там (оно будет запущено после оба завершены).