Ruby-on-Rails JavaScript未在link_to上加載

Question

我正在使用Google可視化在嵌套在視圖內的腳本標簽中構建圖表表。 當直接提取頁面時，此方法效果很好，但通過link_to helper運行時，javascript無法正常工作。

我相信這與渦輪鏈接有關，但是將JavaScript如下包裝成page:load並沒有改變。 我已經確認關閉渦輪鏈接確實可以解決此問題，但是如果沒有它，整個應用程序的運行速度將大大降低。

<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>

Answer 1

可視化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）傳遞給ready事件處理程序，該處理程序什么都不做。 如果希望在文檔准備就緒時調用resulttable函數，則需要從函數名稱末尾刪除() ：

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

另外，我略過了turbolinks的內容，看來您想在這里采用其他方法。 Google加載程序會動態地將腳本標簽添加到頁面的<head> ，而不會被渦輪鏈接抹掉，因此您不想在每次加載新頁面時都繼續調用加載程序。 嘗試以下方法：

function drawTable () {
    // table drawing code
}

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

這將確保加載Visualization API，並在每次加載頁面時調用drawTable函數。

Answer 2

一種解決方案可能是嘗試使用jquery-turbolinks gem。 在這種情況下，應使用jQuery ready()事件。

參見： https : //github.com/kossnocorp/jquery.turbolinks

Ruby-on-Rails JavaScript未在link_to上加載

問題描述

2 個解決方案

解決方案1
5 已采納 2013-09-14 15:25:47

解決方案2
0 2013-09-14 11:49:04

Ruby-on-Rails JavaScript未在link_to上加載

問題描述

2 個解決方案

解決方案1 5 已采納 2013-09-14 15:25:47

解決方案2 0 2013-09-14 11:49:04

解決方案1
5 已采納 2013-09-14 15:25:47

解決方案2
0 2013-09-14 11:49:04