1

我正在使用 Google 可视化在嵌套在视图中的脚本标记中构建图表表。这在直接获取页面时效果很好，但是当通过link_to帮助程序运行时，javascript 不起作用。

我相信这与 turbolinks 有关，但是用 a 包装如下 JavaScript page:load并没有什么不同。我已经确认关闭 turbolinks 确实可以解决这个问题，但是如果没有它，整个应用程序会明显变慢。

<script  type="text/javascript" charset="UTF-8">
    function resultstable () {
        google.load('visualization', '1', {packages:['table']});
          google.setOnLoadCallback(drawTable);
          function drawTable() {
           var data = new google.visualization.DataTable();
            data.addColumn('string', '');
            data.addColumn('number', 'Lot #');
            data.addColumn('string', 'Client');
            data.addColumn('boolean', 'Commercial');
            data.addColumn('string', 'Site');
            data.addColumn('string', 'Biological Classification');
            data.addColumn('string', 'Actions');
            data.addRows([
                <% @lots.each do |lot| %>
                    [
                    '<%= check_box_tag "lot_ids[]", lot.id %>', 
                    <%= lot.id.to_s %>, 
                    '<%= link_to Client.find(lot.client_id).org.to_s.humanize, client_path(lot.client_id) %>',
                    <%= lot.commercial %>,
                    '<%= lot.site %>',
                    '<%= lot.phylum.to_s + " " + lot.l_class.to_s + " " + lot.genus.to_s + " " + lot.species.to_s %>',
                    '<%= link_to edit_lot_path(lot) do %><i class="icon-edit"></i><% end %> <%= link_to lot_path(lot) do %><i class="icon-time"></i><% end %>'
                    ],
                <% end %>           
            ]);

            function rm_google_classes() {
            var className = 'google-visualization-table-table';
            $('.'+className).removeClass(className);

            var className = 'google-visualization-table-th';
            $('.'+className).removeClass(className);

            var className = 'google-visualization-table-tr-head';
            $('.'+className).removeClass(className);

            var className = 'google-visualization-table-tr-odd';
            $('.'+className).removeClass(className);

            var className = 'google-visualization-table-tr-even';
            $('.'+className).removeClass(className); 

            var className = 'google-visualization-table-td';
            $('.'+className).removeClass(className);  

            var className = 'google-visualization-table-td-number';
            $('.'+className).removeClass(className);  

            var className = 'google-visualization-table-td-bool';
            $('.'+className).removeClass(className);  

            $("#gtable-results table").addClass("table table-condensed"); 
            };

            var table = new google.visualization.Table(document.getElementById('gtable-results'));
              table.draw(data, {allowHtml: true});
              rm_google_classes();

            google.visualization.events.addListener(table , 'sort',
            function(event) {
              rm_google_classes();
            });     
           };
         }

    $(document).ready(resultstable());
    $(document).on('page:load', resultstable());       
</script>
4

2 回答 2

5

Visualization API 对它的加载方式非常特别，所以当你在另一个类似的函数中调用 google.load 时，你必须稍微改变你的加载结构。这个：

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

必须改为：

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

此外，您的事件处理程序未正确完成：

$(document).ready(resultstable());
$(document).on('page:load', resultstable());

正在调用resultstable函数并将函数的返回值（在您的情况下为 null）传递给准备好的事件处理程序，它什么也不做。如果您希望在文档准备好时调用 resultstable 函数，那么您需要()从函数名称的末尾删除：

$(document).ready(resultstable);
$(document).on('page:load', resultstable);

另外，我浏览了 turbolinks 的东西，看起来你想在这里采取不同的方法。Google 加载器会动态地向页面添加一个脚本标记，该标记<head>不会被 turbolinks 清除，因此您不希望在加载新页面时一直调用加载器。试试这个：

function drawTable () {
    // table drawing code
}

function init () {
    $(document).on('page:load', drawTable);
    drawTable();
} 
google.load('visualization', '1', {packages:['table'], callback: init});

这将确保加载可视化 API，并在drawTable每次加载页面时调用该函数。

于 2013-09-14T15:25:47.163 回答
0

一种解决方案可能是尝试jquery-turbolinks宝石。在这种情况下，使用 jQueryready()事件应该可以工作。

见：https ://github.com/kossnocorp/jquery.turbolinks

于 2013-09-14T11:49:04.203 回答