Question

所以，我有一个应用程序，我在DOM中有一个空白表，我使用jQuery的.getJSON函数动态地将JSON表加载到表中。这大部分时间都有效。

有时候我的桌子出现在页面上没有任何数据，虽然firebug说我的桌子和JSON在哪里加载。

任何人都有任何想法可能会发生这种情况？

JSON是否可能在表之前加载（它不应该是）？

在尝试加载JSON之前，setTimeout是否有用，以确保表已加载？

代码：

if (currentProdSelectValue === "Candy" && currentAppSelectValue === "Candy Store") {
 $('#page_content').children().fadeOut('slow'); 
 $('#page_content').load('page_eleven_new.html').hide().fadeIn('slow');

 $.getJSON('js/page_eleven.js',
    function(data){

          $('table#table_first_row tr:first td:first').html(data.candy.dataDaily.timeScope);
          $('table#table_first_row tr:first td:nth-child(2)').html(data.candy.dataDaily.lemonHmarsBarss);
          $('table#table_first_row tr:first td:nth-child(3)').html(data.candy.dataDaily.snickers);
          $('table#table_first_row tr:first td:nth-child(4)').html(data.candy.dataDaily.cottonCandy);
          $('table#table_first_row tr:first td:nth-child(5)').html(data.candy.dataDaily.marsBars);
          $('table#table_first_row tr:first td:nth-child(6)').html(data.candy.dataDaily.babyRuth);
          $('table#table_first_row tr:first td:nth-child(7)').html(data.candy.dataDaily.nerds);
          $('table#table_first_row tr:first td:nth-child(8)').html(data.candy.dataDaily.atomicFireBalls);
          $('table#table_first_row tr:first td:nth-child(9)').html(data.candy.dataDaily.fruitStripeGum);


          $('table#table_first_row tr:nth-child(2) td:first').html(data.candy.dataMonthToDate.timeScope);
          $('table#table_first_row tr:nth-child(2) td:nth-child(2)').html(data.candy.dataMonthToDate.lemonHmarsBarss);
          $('table#table_first_row tr:nth-child(2) td:nth-child(3)').html(data.candy.dataMonthToDate.snickers);
          $('table#table_first_row tr:nth-child(2) td:nth-child(4)').html(data.candy.dataMonthToDate.cottonCandy);
          $('table#table_first_row tr:nth-child(2) td:nth-child(5)').html(data.candy.dataMonthToDate.marsBars);
          $('table#table_first_row tr:nth-child(2) td:nth-child(6)').html(data.candy.dataMonthToDate.babyRuth);
          $('table#table_first_row tr:nth-child(2) td:nth-child(7)').html(data.candy.dataMonthToDate.nerds);
          $('table#table_first_row tr:nth-child(2) td:nth-child(8)').html(data.candy.dataMonthToDate.atomicFireBalls);
          $('table#table_first_row tr:nth-child(2) td:nth-child(9)').html(data.candy.dataMonthToDate.fruitStripeGum);

          //table row three

          $('table#table_first_row tr:last td:first').html(data.candy.dataYearToDate.timeScope);
          $('table#table_first_row tr:last td:nth-child(2)').html(data.candy.dataYearToDate.lemonHmarsBarss);
          $('table#table_first_row tr:last td:nth-child(3)').html(data.candy.dataYearToDate.snickers);
          $('table#table_first_row tr:last td:nth-child(4)').html(data.candy.dataYearToDate.cottonCandy);
          $('table#table_first_row tr:last td:nth-child(5)').html(data.candy.dataYearToDate.marsBars);
          $('table#table_first_row tr:last td:nth-child(6)').html(data.candy.dataYearToDate.babyRuth);
          $('table#table_first_row tr:last td:nth-child(7)').html(data.candy.dataYearToDate.nerds);
          $('table#table_first_row tr:last td:nth-child(8)').html(data.candy.dataYearToDate.atomicFireBalls);
          $('table#table_first_row tr:last td:nth-child(9)').html(data.candy.dataYearToDate.fruitStripeGum);

      });

    }

Answer 1

尝试这种方法，在表格到位后加载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()事件，并在那里执行表格填充（它将在两者之后运行完成）。

Answer 2

Nick在我之前进入，但为了证明我对缓存选择器的看法，我会稍微改变他的代码

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'];

        //cache tables rows
        var $trs = $('#table_first_row tr');

        for(var c = 0; i < cat.length; c++) {
          $trs.eq(c).children().each(function(j, td) {
            $(this).html(data.candy[cat[i]][fields[j]]);
          });
        }
    });
  }).hide().fadeIn('slow');
}

将JSON加载到表中，有时表加载没有数据

2 个答案: