为什么jquery-tablesorter无法在我的Rails 4应用程序中运行?

时间:2014-03-10 17:32:10

标签: ruby-on-rails-4 tablesorter

我正在尝试将jquery-tablesorter功能添加到基于的新应用程序中 Michael Hartl的Rails教程示例应用程序,使用Ruby 2.1.0p0和Rails 4.0.2 在Mac(OSX Mavericks)上,我确定我做错了,因为demo code在我的浏览器中有效。

关注these instructions, 我将以下行添加到我的Gemfile中:

gem 'jquery-tablesorter'

然后跑

'bundle install'

这是我的Gemfile.lock的新内容的a Gist

我将此添加到我的application.js文件中:

//= require jquery-tablesorter

这是我的application.css文件:

*= require jquery-tablesorter/theme.blue

将这些文件复制到我的app / assets / javascripts文件夹中(虽然我相信我只需要 “jquery.tablesorter.js”):

jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.widgets.js

然后跟着these instructions,让我的表的id为“myTable”和一类“tablesorter” 并将此代码放入我的“studios.js”文件中:

$(function(){
    $("#myTable").tablesorter();
});

但是当我查看工作室/索引时,我没有可排序的标题,也没有蓝色主题样式。所有 根据我的开发日志,javascript和css文件已成功加载。

这是a Gist of the page source

Rails Tutorial代码包含一个microposts.js文件,用于显示运行计数 新微博中剩余的可用字符:

function updateCountdown() {
        // 140 is the max message length
        var remainder = 140 - jQuery('#micropost_content').val().length;
        jQuery('.countdown').text(remainder + ' characters remaining');
}

jQuery(document).ready(function($) {
        updateCountdown();
        $('#micropost_content').change(updateCountdown);
        $('#micropost_content').keyup(updateCountdown);
});

我想,因为这个javascript使用'jQuery(document).ready(function($)'而不是 '$(document).ready(function()),'如“入门指南”中所示 Tablesorter,由于microposts.js代码正常运行,我应该尝试将studios.js更改为:

jQuery(document).ready(function($){
    $("#myTable").tablesorter();
});

但是,我仍然没有获得可排序的标题或蓝色主题样式。

https://github.com/themilkman/jquery-tablesorter-rails的说明未提及 是否需要添加任何图像资源,以及是否需要任何CSS文件 存储/编辑。通过仔细阅读我页面源中加载的theme.blue.css文件,我可以看到箭头 图像是编码的,所以我相信我不应该在我的app / assets / images文件夹中使用它们 因为我可以通过在查看页面时单击链接来查看theme.blue.css文件 来源,我认为蓝色主题样式也正在加载。

我想我已经准备好了所有的tablesorter功能,我只是想不通为什么我的表的元素都没有用tablesorter类更新,因此没有任何排序功能和样式应用

2 个答案:

答案 0 :(得分:2)

我为你创建了一个演示如何将tablesorter gem添加到普通的rails项目中(特别是第二次提交添加了重要的东西):https://github.com/themilkman/tablesorter-demo 关于你的问题:1。你不应该复制任何默认的JS / CSS文件,这些文件来自gem并自动进入rails资产管道。 这真的听起来像turbo-links麻烦。我在上面的例子中添加了一个宝石。希望这有帮助!

答案 1 :(得分:0)

我正在将所有脚本文件编译成一个带有' require树的文件。'在我的application.js文件中。我删除了该要求,而是使用以下代码行从我的应用程序布局文件中包含每个特定于控制器的脚本文件:

<%= javascript_include_tag params[:controller], "data-turbolinks-track" => true %>

现在每个脚本文件都会调用&#39; $(文档).ready&#39;正在运行,所有行为都是正常的。

所以在我看来,问题不在于turbo-links,而在于我的资产管道配置。但是这个Rails资产管道对我来说是一个相当新的领域,所以如果我错了,请随时纠正我。