jquery和Google表格可视化

我希望有人能够帮助我。我在同一页面上使用google.code可视化工具和jquery。jquery和Google表格可视化

我打电话给文档$(document).ready函数，但怀疑问题在于调用google.setOnLoadCallback(drawVisualization);函数。

的document.ready功能后，仍然加载，然后灯箱效果并不适用于表

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'}); 
    }); 
    </script>

如何灯箱效果应用到表的链接，谷歌的可视化表后，任何想法已加载？

我还添加了完整的脚本，因为我现在应该有助于发现问题。

<script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['table']}); 
    </script> 
<script type="text/javascript"> 
    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); 
    </script> 
<div id="table"></div><script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 
      $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'}); 
     }); 
     </script>

感谢

来源

2010-07-12 Gerald Ferreira

编辑此特定的谷歌可视化API：

的.draw()方法不是直接的，它仍然有一些工作要做，并没有做到这一点的当前线程（因为它可能需要从服务器检索图像等）。它们虽然提供了一个事件监听器，你可以用它来听为ready event，就像这样：

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

所以它肯定添加该代码之间以下两行火：

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

这将确保.prettyPhoto1()在所有元素加载并准备就绪后运行，包括可视化中的元素。在这种情况下仍然排除document.ready，只运行一次插件。

来源

2010-07-12 11:52:12

嗨尼克感谢您的答案，但它仍然无法正常工作。难道我有重复专栏吗？并且每次需要灯箱时都需要该功能？我有另外两个按钮上的灯箱，它们会加载（但不是重复的一部分？）。但一次重复不工作...（因为它只被调用一次？） – 2010-07-12 12:10:27

@杰拉德 - 你是说'rel =“prettyPhoto1 [iframes]”'是唯一不能正常工作？ – 2010-07-12 12:14:36

是的，（谷歌可视化之外的rel =“prettyPhoto1 [iframes]”的按钮可以工作100％），但谷歌可视化内的按钮无法正常工作。（它打开一个新页面，而不是打开灯箱？） - 谷歌可视化表正在加载，并显示与rel =“prettyPhoto1 [iframes]”的按钮，但它不加载灯箱，如果我点击它。 – 2010-07-12 12:17:27

jquery和Google表格可视化

回答

相关问题