通過ajax方法加載谷歌帶註釋的圖表jQuery UI中的內容通過AJAX方法

我遇到了嘗試加載谷歌帶註釋的圖表（http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html）內使用內容通過ajax方法（http://jqueryui.com/demos/tabs/#ajax）在jquery UI中的問題。通過ajax方法加載谷歌帶註釋的圖表jQuery UI中的內容通過AJAX方法

相反，如果我使用默認的選項卡功能，寫出來的代碼的東西很好地工作：

<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>

但是如果我使用jQuery UI的標籤，並點了ajax方法部分的標籤，這不是完全沒有用。頁面呈現，一旦圖表加載，瀏覽器窗口變白。但是，您可以在圖表顯示完成呈現之前看到選項卡部分閃光（圖表從不實際顯示）。我已經證實，部分確實在沒有圖表的情況下正確加載。

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

來源

2010-05-18 twmulloy

您的JavaScript在HTML中間，所以腳本在html頁面加載到最後加載Google可視化API之前開始運行。

此外，將jQuery UI選項卡與通過ajax加載的內容一起使用的想法在您的案例中找不到好。在頁面http://jqueryui.com/demos/tabs/#ajax您可以閱讀以下內容：

你需要的HTML是從用於靜態標籤的略有不同：的指向現有資源的鏈接列表（從其中內容獲取加載）並且沒有額外的容器在所有（不顯眼！）。

所以，我想你會推薦使所有更容易和使用tabs控制select事件。

來源

2010-05-18 17:33:49 Oleg

通過ajax方法加載谷歌帶註釋的圖表jQuery UI中的內容通過AJAX方法

回答

相關問題