bxslider-rails“TypeError:$(...)。bxSlider不是函数”

时间:2015-10-09 06:04:01

标签: jquery ruby-on-rails ruby-on-rails-4 bxslider

好的......所以我正在使用bxslider-rails插件(显然没有其他人使用它,因为我还没有看到任何其他问题)并且我得到了上面的TypeError。我已经更新到最新版本的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>

最后各个宝石版本:

使用jquery-rails 4.0.5 使用jquery-ui-rails 5.0.3 使用coffee-rails 4.1.0 使用bxslider-rails 4.2.5.1

这完全属于Rails 4.2.4

我已经尝试了所有我能想到的东西,我到处读到的所有内容都说这应该有效......但事实并非如此。我得到了TypeError,一个图像堆叠在另一个上面。

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

作为旁注,我也得到一个TyperError,说ActiveAdmin的“perPage”不是函数。

任何帮助都将受到赞赏,这是在开发环境中。

1 个答案:

答案 0 :(得分:1)

好的......这将是多重答案中的一个。

首先关闭:我使用ActiveAdmin获得的“perPage”TypeError非常有用......这意味着ActiveAdmin在我身上加载了双重jQuery。这有时会导致jQuery脚本根本无法加载。

我环顾四周,发现了这个解决方案:

配置/初始化/ 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”TypeError但我仍然有“bxslider”typeError。

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

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

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