首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么jquery-tablesorter在我的Rails 4应用程序中不能工作?

为什么jquery-tablesorter在我的Rails 4应用程序中不能工作?
EN

Stack Overflow用户
提问于 2014-03-10 17:32:10
回答 2查看 2.3K关注 0票数 3

我正在尝试将jquery-tablesorter功能添加到由Michael的Rails教程示例应用程序构建的新应用程序中,在Mac上使用Ruby2.1.0p0和Rails 4.0.2,而且我肯定我做错了什么,因为演示代码在我的浏览器中工作。

这些指示之后,我在Gemfile中添加了以下一行:

代码语言:javascript
复制
gem 'jquery-tablesorter'

然后跑了

代码语言:javascript
复制
'bundle install'

这是我的要旨 Gemfile.lock的新内容。

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

代码语言:javascript
复制
//= require jquery-tablesorter

下面是我的application.css文件:

代码语言:javascript
复制
*= require jquery-tablesorter/theme.blue

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

代码语言:javascript
复制
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.widgets.js

然后遵循这些指示,使我的表有一个"myTable“的id和一个"tablesorter”类,并将此代码放入"studios.js“文件中:

代码语言:javascript
复制
$(function(){
    $("#myTable").tablesorter();
});

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

这是页面源的要点

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

代码语言:javascript
复制
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(文档).ready(函数($)’而不是‘$(文档).ready(函数())’,如表表器入门说明中所示,并且由于microposts.js代码功能正确,所以我应该尝试将studios.js更改为:

代码语言:javascript
复制
jQuery(document).ready(function($){
    $("#myTable").tablesorter();
});

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

https://github.com/themilkman/jquery-tablesorter-rails的说明没有提到是否需要添加任何图像资产,也没有提到是否需要存储/编辑任何CSS文件。通过仔细阅读加载在页面源代码中的theme.blue.css文件,我可以看到箭头图像是经过编码的,所以我认为我不应该需要它们在我的app/assets/images文件夹中。

因为我可以在查看页面的源代码时点击链接来查看theme.blue.css文件,所以我假设蓝色主题样式也被加载了。

我想我已经准备好了所有的表格操作程序的功能,我只是不明白为什么我的表中的元素都没有用tablesorter类来更新,因此没有应用排序功能和样式。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-12 18:51:19

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

代码语言:javascript
复制
<%= javascript_include_tag params[:controller], "data-turbolinks-track" => true %>

现在,每个脚本文件对‘$(文档).ready’的调用都已正确运行,并且所有行为都是正常的。

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

票数 0
EN

Stack Overflow用户

发布于 2014-03-11 20:31:45

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22307190

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档