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 .
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.