2


1

jqueryとgoogleテーブルの視覚化

私を助けてくれる人がいることを願っています。 同じページでgoogle.code視覚化ツールとjqueryを使用しています。

私はドキュメントの $(document).ready`関数を呼び出していますが、問題は google.setOnLoadCallback(drawVisualization); `関数の呼び出しにあると思われます。

これはまだ「document.ready」関数の後にロードされ、テーブルにライトボックス効果を適用しません

    $(document).ready(function(){
        $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'});
    });

Google視覚化テーブルが読み込まれた後、ライトボックス効果をテーブル内のリンクに適用する方法についてのアイデアはありますか?

また、問題を見つけるのに役立つはずですので、完全なスクリプトも追加しました。

      google.load('visualization', '1', {packages: ['table']});


    function drawVisualization() {
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'No');
      data.addColumn('string', 'Page URL');
      data.addColumn('string', 'EDIT');
      data.addRows(10);
      <% while ((Repeat1__numRows-- != 0) && (!rs_page_1.EOF)) { %>
      data.setCell(<%= Repeat1__index %>, 0, '<%=(rs_page_1.Fields.Item("g_page_no").Value)%>');
      data.setCell(<%= Repeat1__index %>, 1, '<a href="<%=(rs_page_1.Fields.Item("g_page_site").Value)%><%=(rs_page_1.Fields.Item("g_page_url").Value)%>"><%=(rs_page_1.Fields.Item("g_page_site").Value)%><%=(rs_page_1.Fields.Item("g_page_url").Value)%></a>');
      data.setCell(<%= Repeat1__index %>, 2, '<span class="gallery clearfix"><div class="btn_newsite"><a href="/application/functions/preview.asp?g_sites_no=<%=(rs_page_1.Fields.Item("g_sites_no").Value)%>&amp;g_page_no=<%=(rs_page_1.Fields.Item("g_page_no").Value)%>&amp;iframe=true&width=100%&height=100%" rel="prettyPhoto1[iframes]" title="View">Edit</a></div></span>');
      <%
  Repeat1__index++;
  rs_page_1.MoveNext();
};
%>
      // Create and draw the visualization.
      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data, {'allowHtml': 'true'}, {'showRowNumber': 'true'}, {'firstRowNumber': '1'});
    }
    google.setOnLoadCallback(drawVisualization);


        $(document).ready(function(){
            $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'});
        });

ありがとう

1 Answer


2


この特定のGoogle Visualization APIの編集:

.draw()`メソッドは即時ではなく、まだやるべきことがあり、現在のスレッドでは実行しません(サーバーなどから画像を取得する必要がある場合があるため)。 ただし、イベントリスナーは提供されます。これを使用して、次のようにhttp://code.google.com/apis/visualization/documentation/events.html#The_Ready_Event [`ready event]をリッスンできます。

google.visualization.events.addListener(visualization, 'ready', function() {
  $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'});
});

次のコードをこれらの2行の間に追加して、確実に起動するようにします。

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {'allowHtml': 'true'}, {'showRowNumber': 'true'}, {'firstRowNumber': '1'});

これにより、ビジュアライゼーションの要素を含め、すべての要素がロードされて準備が完了した後に、 `.prettyPhoto1()`が実行されます。 この場合でも、 `document.ready`は省略し、プラグインを1回だけ実行します。