gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 08:49:53 28 4
gpt4 key购买 nike

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

我相信这与 turbolinks 有关,但是如下所示用 page:load 包装 JavaScript 并没有什么不同。我已经确认关闭 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)传递给就绪事件处理程序,这什么也不做。如果您希望在文档准备就绪时调用 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每次加载页面时都会调用该函数。

关于javascript - Ruby-on-Rails JavaScript 未在 link_to 上加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18801062/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com