2

これは少し複雑ですが、できる限り私はそれを説明しようとします。jqueryui ajaxタブ内でGoogle Tableを使用する

私はGoogle Ajaxライブラリ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も使用しています。私は、AJAXを使用して、要求されたページをタブにロードするjqueryuiタブコントロールを持っています。要求されたページで、私は同じhtmlヘッドを持っているので、同じjavascriptです。リクエストされたページには、Googleのテーブルコントロールがあります。このシナリオでページを実行すると、タブに空白のページが表示されます。リクエストされたページを単独で実行すると(AJAX経由で呼び出さなくても)、Googleのテーブルコントロールがうまく表示されます。

私はAJAXをかなり新しくしていますので、何か不足しているかもしれません。どんな助けでも大歓迎です。

- kyle

EDIT:誰か?

+0

ソースコードを使用してサンプルを投稿できますか? –

答えて

1

私はまだそれがなぜ機能するのか説明できませんが、これに対する答えは非常に簡単でした。私がしなければならなかったのは、2つの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> 
関連する問題