Déplacer du HTML avec jQuery fait disparaître les graphiques de chart.js, pas d'erreurs, raison inconnue Comment puis-je le redessiner?

Question

J'ai une page avec plusieurs graphiques Chart.js. La page a deux vues: TABULATED (bootstrap) et SEQUENTIAL. Ensuite, lorsque la page est chargée, les graphiques sont automatiquement organisés dans la vue tabulée (chaque onglet correspond à chaque graphique). La structure html séquentielle est:

<div class="chartsCotainter"> 
    <div class="chart1"> 
    <!-- here is the chart 1 ... --> 
    </div> 
    ... 
</div> 

Le problème est lorsque les cartes sont finalement organisées disparaît étrangement. La solution que je trouve pour résoudre le problème est d'organiser les cartes dans les onglets au bout de 5 secondes à l'aide setTimeout

function refreshView() 
{ 
    console.log("Refreshing..."); 
    organizeChartsInTabs(); 
} 

setTimeout(refreshView, 5000); 

Je ne veux pas utiliser setTimeout, je crois qu'il est nécessaire d'redraw toutes les cartes organisent après , Je ne sais pas comment. J'ai essayé .update() mais pas de succès.

Answer 1

Comme il n'y a pas de source complète fournie. Le problème que j'ai compris est avec le chargement de la page. Vous exécutez certaines fonctions JavaScript avant que toutes les choses liées ne soient chargées.

Vous devriez essayer document jquery fonction prêt

// A $(document).ready() block. 
$(document).ready(function() { 
    console.log("ready!"); 
}); 

Mettez votre appel dans la fonction prêt.

Une page ne peut pas être manipulée en toute sécurité tant que le document n'est pas "prêt". jQuery détecte cet état de préparation pour vous. Code inclus à l'intérieur $ (document) .ready() ne s'exécutera qu'une fois que la page Document Objet Modèle (DOM) est prêt pour l'exécution du code JavaScript. Le code inclus à l'intérieur de $ (window) .on ("load", function() {...}) s'exécutera une fois que la page entière (images ou iframes), pas seulement le DOM, est prête.

Ainsi, votre code sera quelque chose

// A $(document).ready() block. 
$(document).ready(function() { 
    organizeChartsInTabs(); 
});