charger google annoté graphique dans jquery ui onglet contenu via la méthode ajax

Question

Je rencontre un problème avec essayer de charger un graphique annoté google (http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html) dans un onglet jquery ui en utilisant le contenu via la méthode ajax (http://jqueryui.com/demos/tabs/#ajax).

Si au contraire j'utiliser la fonctionnalité des onglets par défaut, écrivant les choses de code fonctionnent très bien:

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Chart</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <script type="text/javascript"> 
     google.load('visualization', '1', {'packages':['annotatedtimeline']}); 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('date', 'Date'); 
     data.addColumn('number', 'cloudofinc.com'); 
     data.addColumn('string', 'header'); 
     data.addColumn('string', 'text') 
     data.addColumn('number', 'All Clients'); 
      data.addRows([ 
       [new Date('May 12, 2010'), 2, '2 New Users', '', 3], 
       [new Date('May 13, 2010'), 0, undefined, undefined, 0], 
       [new Date('May 14, 2010'), 0, undefined, undefined, 0], 
      ]); 

      var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_users')); 

      chart.draw(data, { 
     displayAnnotations: false, 
     fill: 10, 
     thickness: 1 
      }); 
     } 
     </script> 
     <div id='chart_users' style='width: 100%; height: 400px;'></div> 
    </div> 
</div> 

Mais si j'utilise la méthode ajax pour onglet jquery ui et le point à la partie de l'onglet, il doesn ne fonctionne pas complètement. La page s'affiche et une fois le graphique chargé, la fenêtre du navigateur devient blanche. Cependant, vous pouvez voir l'onglet clignotement partiel juste avant que le graphique ne semble terminer le rendu (le graphique ne s'affiche jamais réellement). J'ai vérifié que le chargement partiel est en effet bien effectué sans le graphique.

<div id="tabs"> 
    <ul> 
    <li><a href="ajax/tabs-1">Chart</a></li> 
    </ul> 
</div> 

Answer 1

Vous avez JavaScript intérieur du milieu de HTML, de sorte que le script de démarrage en cours d'exécution avant que la page html sont chargés jusqu'à la fin et avant que l'API de visualisation Google est chargée.

En outre l'idée d'utiliser l'onglet jQuery UI avec le contenu chargé via ajax je trouve pas bon dans votre cas. Sur la page http://jqueryui.com/demos/tabs/#ajax vous pouvez lire ce qui suit:

Le code HTML dont vous avez besoin est un peu différent de celui qui est utilisé pour les onglets statiques: Une liste de liens pointant vers les ressources existantes (de où le contenu est chargé) et aucun conteneurs supplémentaires à tous (discret!).

Je vous recommande de faire tout plus facile et utiliser l'événement select du contrôle tabs.