Chargement de JSON dans la table, parfois chargement de la table sans données

Question

J'ai donc une application où j'ai une table vide dans le DOM et je charge dynamiquement la table JSON dans la table avec la fonction .getJSON de jQuery. Cela fonctionne ... la plupart du temps.

Parfois, ma table apparaît sur la page sans aucune donnée, bien que firebug indique que ma table et le JSON ont été chargés.

Quelqu'un at-il une idée de ce qui pourrait arriver?

Est-il possible que le JSON se charge avant la table (il ne devrait pas être)?

Est-ce qu'un setTimeout serait utile, pour s'assurer que la table est chargée avant que j'essaye de charger le JSON?

code:

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

Essayez cette approche à la place, le chargement du JSON après la table est en place ... aussi je nettoyais la structure globale un peu:

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

Cette approche les boucles si les propriétés, en data.candy.dataDaily.timeScopedata.candy.dataDaily.timeScope peuvent être écrites comme data.candy['dataDaily']['timeScope'], que vous pouvez utiliser à votre avantage ici, en spécifiant ces noms une seule fois et juste en boucle à travers ces propriétés ... comme vous pouvez e ci-dessus, cela permet d'économiser un peu de code;)

La partie importante est le $.getJSON() est en cours d'exécution comme un rappel à .load(), assurant la table est là et ces sélecteurs sont trouver quelque chose pour remplir ... qui n'est pas le cas actuellement. Vous voyez une table vide maintenant parce qu'ils se chargent dans le désordre parfois ... cela empêche cela.

Sinon, vous pouvez toujours charger les deux, mis data à une variable globale, et utiliser l'événement .ajaxStop(), et faire la population de la table il (elle se déroulera après à la fois complète).

Answer 2

Nick a devant moi, mais pour prouver mon point en ce qui concerne les sélecteurs de mise en cache, je modifier son code légèrement

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