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 .
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
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.