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

Question

Ok... So I'm using the bxslider-rails plugin (which apparently nobody else is using because I haven't seen any other questions here about it) and I'm getting the above TypeError. I've updated to the latest versions of jquery-rails and coffee-rails. Jquery seems to be loaded fine and it doesn't seem to be loaded anywhere else in the application.

Here is my layout file:

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>

Here is my application.js:

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

Here is the 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>

And finally the respective gem versions:

Using jquery-rails 4.0.5 Using jquery-ui-rails 5.0.3 Using coffee-rails 4.1.0 Using bxslider-rails 4.2.5.1

This is all under Rails 4.2.4

I've tried absolutely everything I could think of, and everything I read everywhere says that this should be working... but it is not. I get the TypeError and one image stacked on top of the other.

It's also worth nothing that if I check the debugger jquery.bxslider is fine but I also get a bxslider.js which is blank.

As a sidenote I also get a TyperError saying that ActiveAdmin's "perPage" is not a function.

Any help would be appreciated and this is in the development environment.

Answer 1

Ok... this is going to be one of those multi-fold answers.

First off: The "perPage" TypeError I was getting with ActiveAdmin was very telling... It meant that ActiveAdmin was double-loading jQuery on me. This can sometimes cause jQuery scripts to not load at all.

I looked around and found this solution to that:

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 }

And you can delete the "//=require active_admin/base" from app/assets/active_admin.js and just load everything that was in there in application.js instead.

This got rid of the "perPage" TypeError but I still had the "bxslider" typeError.

What I realized was the bxslider-rails... for whatever reason... wasn't really loading the bxslider javascript. I checked this by loading:

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

Now you can load that however you want. Probably the best way would be to drop the script in assets somewhere... or in your public folder... or however you wanted to do it. But the problem turned out to be that bxslider-rails wasn't really adding the script to the asset pipeline or anywhere else that I could see. So you're better off just loading the script the normal way. I'll experiment with other ways to load it and upload this post as necessary, but in the end just downloading the script and putting it in the code myself is what worked for me to get rid of the error.