Adding flexslider manually into Rails 4 app - Type Error flexslider is not a function

Question

I am trying to fix an error in Rails 4 app . The flexslider on my app doesnt work , no images loading at all. In the console it shows - TypeError (..).flexslider is not a function The theme works completely fine when its not integrated in Rails . Its a bootstrapped based theme , with following configs - The application.css.scss file looks like the following

*= require_self
*= require font-config
*= require framework_and_overrides
*= require animate
*= require flexslider
*= require site-wide

For application.js file has the following -

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

Tried changing their order quite a few times , but no effect. The sliders are initialized in the following way -

$(document).ready(function() {
$('#myCarousel').flexslider({
        animation: "fade",
        directionNav: false,
        controlNav: false //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage

    });
    $('#slider').flexslider({
        animation: "fade",
        directionNav: true
    });
   });

I am a Rails Beginner ,please throw some insight , been trying to solve it for the last few hours .

Thanks for your time .

Update : I am using RailsApps starter apps by Daniel Kehoe using composer .

Update : I have not installed flexslider using any gem , since the gem I found on rubygems website is using an older version , ie. flexslider 2.2 and I am using 2.4 .

So I am trying to do it manually .

Answer 1

Okay, it also took me a while to figure it out but works amazingly now.

STEP 1:

Download source code from here: http://flexslider.woothemes.com/thumbnail-controlnav.html

STEP 2:

Then, get three files as below:

1. /demo/css/flexslider.css
2. /fonts      //yes, copy this entire folder that contains four files
3. /demo/js/jquery.flexslider.js

STEP 3:

Relocate the first two files (1 and 2) inside vender/assets/stylesheets, and the last one (3) inside vender/assets/javascripts

STEP 4:

include in application.css/sass on top:

*= require flexslider

and include in application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.flexslider
//= require_tree .

SETP 5:

Place the below inside application.js

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
   });
});

Then you get basic slider. If you want to get other slider types, just change the STEP 5 javascript code to whatever you see here: http://flexslider.woothemes.com/index.html

Answer 2

It should be

*= require jquery.flexslider

instead of

*= require flexslider

There are two gems flex slider & flexslider-rails: both have the same way of including javascript. See the documentation for the one you are using.

https://github.com/constantm/Flexslider-2-Rails-Gem#usage https://github.com/werein/flexslider-rails#usage

Answer 3

Okie , Its my first time integrating a bootstrap based theme developed outside of the rails environment and than integrated into it . here's how I solved the issue In the application.js file (the manifest file) , I have added

//= require_self on top like below :

//= require_self
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

Placing it anywhere in between //= require jquery and //= require turbolinks made my sliders and even bootstrap modals not working . So after lot of attempts I figured out , it has to be on top.

How I found out , almost everytime I checked my source yesterday , I was ignoring the application-[content hash].js , which was placed below all the js files I mentioned in the manifest file .

Today , I thought may be this file is creating the issue, and since the file name was application-[content hash].js I used //= require_self to accommodate its placement hard-coded in the file itself . I was unaware of the //= require_self stuff for the js since I see it being mentioned only in the css manifest file,may be, its because of my journey with Rails 4.2 is just 5-6 months old . So senior rails developer's might have a better way to do it .

If anyone can improve the answer or throw some more light into it , I will be grateful.

Thanks ** Update - Okie here's another thing I found out , I was using a starter app by Daniel Kehoe using Composer tool and it contained precompiled assets in public folder , which got included when used the require_self directive.