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

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.