jQuery插件Rails未加载答案

【问题标题】：jQuery plugin Rails not loadingjQuery插件Rails未加载
【发布时间】：2013-07-14 21:50:48
【问题描述】：

我有this problem before，我花了整整两个周末试图找出并理解这个问题。同样的问题不断出现。希望我能确定这个 Rails 应用程序中到底发生了什么。

让 jQuery 插件 pageslide 与我的 rails 应用程序一起工作。

在app/vendor/assets/javascripts 中是文件jquery.pageslide.js。所以，我相应地修改了我的 application.js 清单-

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require raphael.min
//= require justgage
//= require jquery.purr
//= require best_in_place
//= require lightbox
//= require jquery.cookie
//= require jquery.joyride-2.0.3
//= require jquery.pageslide
//= require modernizr.mq
//= require_tree .

我对@987654330@ 中的jquery.pageslide.css 做同样的事情。这 application.css清单

 *= require jquery.ui.datepicker
 *= require_self
 *= require bootstrap
 *= require front
 *= require lists
 *= require tasks
 *= require lightbox
 *= require joyride-2.0.3
 *= require jquery.pageslide
 */

现在在我的一个视图中使用slide out a modal 的插件-

views/lists/show.html.erb-

<a href="#modal123" class="second_thing">Link text</a>
<div id="modal123" style="display:none">
    <h2>Modal</h2>
    <p>And all the stuff.</p>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>

javascripts/lists.js.coffee-

$ ->
  $("a.second_thing").pageslide({ direction: "left", modal: true });

我的初始清单-

-控制台没有警告或错误。 -css 和 js 页面幻灯片文件可以在页面的源代码中找到。 - 确保在javscripts/lists.js.coffee 中调用 pageslide 之前加载了 DOM/jQuery - 我的清单文件的顺序似乎没有表明在加载 pageslide.js 之前正在执行 lists.js.coffee

我似乎遗漏了一些额外的检查来确保它有效？

其他注意事项- 在开发环境中，其他 jQuery 插件工作（joyride 但在带有脚本标签的 show.html.erb 页面中调用它），我有这行 config.assets.initialize_on_precompile = false 来安抚application.rb 中的设计。

我很困惑，我还应该检查什么？

【问题讨论】：

我没有足够的关于js和jquery的信息，但似乎咖啡文件的第一行应该被删除，你可以试试吗？
需要该位来延迟代码，直到 DOM 加载完毕。没有它，代码将在完整的 html 加载之前执行。
我在 pageslide 插件页面检查了你的咖啡和样品。几乎复制粘贴，但编译脚本除外。当我从coffeescript.org 页面检查您的代码时，生成的脚本与原始脚本中的示例脚本不同。我建议检查您的代码并查看原始代码与您的代码之间的区别。
我会检查，但我不认为这是问题，因为我运行它与 show.html.erb 页面上纯 javascript <script> $(document).ready(function() { $(".second_thing").pageslide({ direction: "left", modal: true }); }); </script> 中的示例完全相同，也没有有用。
您检查过 Chrome / Firefox 中的控制台吗？这可能会显示一些 javascript 错误。我有一个类似的问题，最终是由 javascript 要求的顺序引起的。

标签： jquery ruby-on-rails asset-pipeline

【解决方案1】：

好的，感谢@muttonlamb 的评论并重新阅读了 rails 指南上的资产管道部分，我得到了它。

我在我的 show.html.erb 文件中添加了这一行，因为 pageslide 要求源文件包含在 body 标记中，而我最初的方式只是在头部加载。

<%= javascript_include_tag "jquery.pageslide" %>

注意：我还在 app/assets/javascripts 下明确添加了 jquery.pageslide 以进行上述参考。

这似乎不是对性能最友好的，所以我很乐意标记一个更好的答案来实现上述目标。

【讨论】：