bxslider-rails "TypeError: $(...).bxSlider is not a function"

Question

好的......所以我正在使用 bxslider-rails 插件（显然没有其他人在使用它，因为我在这里没有看到任何其他问题）并且我得到了上面的类型错误。我已经更新到最新版本的 jquery-rails 和 coffee-rails。 Jquery 似乎加载正常，但似乎没有在应用程序的其他任何地方加载。

这是我的布局文件：

application.html.erb

  <%= stylesheet_link_tag    "application", :media => "all" %>
        <%= javascript_include_tag "application" %>

<style>
.bxslider {
  height: auto;
  width: 640px;
  background-color: #c41230;
  background-size: cover;
  position: relative;
  border: 1px solid red;
}
</style>

这是我的 application.js:

//= require jquery
//= require jquery_ujs
//= require bxslider
//= require_tree .

这里是 HTML:

<div class="pix" style="float: left;" >
<ul class="bxslider">
<% @dailies.order("created_at desc").limit(2).each do |feat| %>

<li>
<%= link_to(image_tag(feat.fphoto.url(:large), :alt => feat.title, :title => "Click here to learn more about liquid.radio"), feat) %> 
</li>
<% end %>
</ul>

<script type="text/JavaScript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: false,
                hideControlOnEnd: true
            });
        });
    </script>

</div>

最后是各自的 gem 版本：

使用jquery-rails 4.0.5 使用 jquery-ui-rails 5.0.3 使用咖啡-rails 4.1.0 使用 bxslider-rails 4.2.5.1

这都是在Rails 4.2.4

下

我已经尝试了所有我能想到的方法，而且我到处阅读的所有内容都说这应该有效……但事实并非如此。我得到 TypeError 并且一张图像堆叠在另一张图像之上。

如果我检查调试器 jquery.bxslider 没问题，但我也得到一个空白的 bxslider.js。

作为旁注，我还收到一个 TyperError，说 ActiveAdmin 的 "perPage" 不是一个函数。

任何帮助将不胜感激，这是在开发环境中。

Answer 1

好的...这将是那些多重答案之一。

首先：ActiveAdmin 遇到的 "perPage" TypeError 非常明显...这意味着 ActiveAdmin 正在对我进行双重加载 jQuery。这有时会导致 jQuery 脚本根本无法加载。

我环顾四周，找到了这个解决方案：

config/initializers/active_admin.rb

current_javascripts = config.javascripts.clone
  config.clear_javascripts!
  config.register_javascript 'application.js'
  current_javascripts.each{ |j| config.register_javascript j }

并且您可以从 app/assets/active_admin.js 中删除“//=require active_admin/base”，然后只加载 application.js 中的所有内容。

这摆脱了 "perPage" 类型错误，但我仍然有 "bxslider" 类型错误。

我意识到 bxslider-rails...出于某种原因...并没有真正加载 bxslider javascript。我通过加载检查了这个：

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

现在您可以随心所欲地加载它。可能最好的方法是将脚本放在某个地方的资产中......或者在你的 public 文件夹中......或者你想这样做。但问题是 bxslider-rails 并没有真正将脚本添加到资产管道或我能看到的任何其他地方。所以你最好以正常方式加载脚本。我将尝试其他方法来加载它并根据需要上传这个 post，但最后我自己下载脚本并将其放入代码中对我来说是摆脱错误的方法。

bxslider-rails "TypeError: $(...).bxSlider is not a function"

bxslider-rails "TypeError: $(...).bxSlider is not a function"

jquery

ruby-on-rails

ruby-on-rails-4

bxslider