通过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方法

回答

相关问题