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

Question

I'm using Google visualisation to build a charts table in a script tag nested inside a view. This works well enough when the page is fetched directly but when running through a link_to helper the javascript does not work.

I believe this was related to turbolinks however wrapping the JavaScript as below with a page:load hasn't made a difference. I have confirmed turning off turbolinks does resolve this however the whole app is significantly slower without it.

<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

The Visualization API is very particular about how it is loaded, so when you are calling google.load inside another function like that, you have to change your loading structure a bit. This:

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

must be changed to this:

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

Also, your event handlers are not done correctly:

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

is calling the resultstable function and passing the return value of the function (null in your case) to the ready event handler, which accomplishes nothing. If you want the resultstable function to be called on document ready, then you need to remove the () from the end of the function name:

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

Also, I skimmed over the turbolinks stuff, and it seems like you want to take a different approach here. The Google loader dynamically adds a script tag to the <head> of the page, which doesn't get wiped out by turbolinks, so you don't want to keep calling the loader whenever you load a new page. Try this instead:

function drawTable () {
    // table drawing code
}

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

That will ensure that the Visualization API is loaded, and the drawTable function is called with every page load.

Answer 2

One solution may be trying the jquery-turbolinks gem. Using the jQuery ready() event should work in that case.

See: https://github.com/kossnocorp/jquery.turbolinks