在jqueryui ajax选项卡中使用Google Table

时间:2009-06-14 20:17:32

标签: jquery ajax jquery-ui google-visualization google-ajax-libraries

好的,这种情况有点复杂,但我会尽力解释它。

我正在使用Google Ajax Libraries API将jquery和jqueryui添加到页面上,因此我的页面顶部看起来像这样。

<head>
    <title>TBTNet</title>
    <link rel="stylesheet" type="text/css" href="_css/style.css">
    <link rel="stylesheet" type="text/css" href="_css/jquery-ui.css">

    <script src="http://www.google.com/jsapi"></script>

    <script>
        google.load("jquery", "1"); 
        google.load("jqueryui", "1"); 
        google.load('visualization', '1', {packages: ['table']});
    </script>

</head>

如您所见,我也在使用Google Visualizations Table API。在页面上,我有一个jqueryui选项卡控件,它使用AJAX将请求的页面加载到选项卡中。在请求的页面上我有相同的html头,所以相同的JavaScript。在请求的页面上有一个谷歌表控件。当我在此方案下运行页面时,选项卡显示一个空白页面。当我单独运行请求的页面(不通过ajax调用它)时,谷歌表控件显示就好了。

我对AJAX很新,所以我可能会遗漏一些东西。任何帮助将不胜感激。

- 凯尔

编辑:任何人?

1 个答案:

答案 0 :(得分:1)

这个问题的答案非常简单,但我仍然无法解释它为什么会起作用。我所要做的就是在两个jquery之前移动可视化加载,现在一切正常。

<head>
    <title>TBTNet</title>
    <link rel="stylesheet" type="text/css" href="_css/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="_css/style.css">

    <script src="http://www.google.com/jsapi"></script>

    <script>
        google.load('visualization', '1', {packages: ['table']});
        google.load("jquery", "1"); 
        google.load("jqueryui", "1"); 
    </script>

    <!--<script src="_includes/js/jquery-ui.min.js"></script>-->

</head>