use*_*663 1 javascript ruby-on-rails google-visualization turbolinks ruby-on-rails-4
我正在使用Google可视化在嵌套在视图中的脚本标记中构建图表.当直接获取页面时,这种方法运行良好,但是当通过link_to帮助程序运行时,javascript不起作用.
我相信这与turbolinks有关,但是如下所示将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>
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)传递给ready事件处理程序,该处理程序不执行任何操作.如果要在文档就绪时调用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});
这将确保加载Visualization API,并在drawTable每次加载页面时调用该函数.