I'm trying to setup bootstrap slider to work in my Rails 4 app.
I've been struggling for most of the past year in trying to figure out how to make it work.
I have tried every combination of html/js in this page:
http://seiyria.com/bootstrap-slider/
I can't get any of them working. I don't get any console errors and I can see the div id in the chrome inspector elements window. The view rendered is just a blank container when I try to use this.
I have:
Gemfile
gem 'bootstrap-slider-rails'
Application.js
//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
// require slider
//= require bootstrap-slider
//= require_tree .
I have also tried moving bootstrap-slider to the last position after tree .
App/assets/javascripts/slider.js
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
app/views/projects/_trl.html.erb
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
Can anyone show me where to find guidance on how to get this working. I can't understand why it's so easy for everyone else and so complicated for me.
The console doesnt show any errors with the js.
On the basis of Using bootstrap-slider with jQuery UI advice, I changed the slider.js file to:
jQuery(document).ready(function() {
$("#ex8").bootstrapSlider({
tooltip: 'always'
});
});
Use:
//= require slider
And update slider.js:
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
});
If you're using Turbolinks, use:
<script type="text/javascript">
$(document).on('turbolinks:load',function(){
// With JQuery
$("#slider").slider();
$("#slider").on("slide", function(slideEvt) {
$("#sliderSliderVal").text(slideEvt.value);
});
});
</script>
Related
I'm working on a project in Rails 5.1.6 / ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]
My problem is that, following step by step the documentation of the gem best_in_place I get an error.
Error:
I am a little complicated with the documentation since it is not fully explained how to implement the gem in Rails 5.
Any help is useful.
Thank you very much!
Important data:
assets / javascripts / application.js
assets / javascripts / use_best_in_place.js
Gemfile
gem list
views / layout / application.html.erb
Why are you loading jquery twice? One in application.js and other in views?
Try removing the one in views and it should work fine.
Just remove this line from your application.html layout (jquery is already require inside application.js from jquery-rails gem):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
It should work this way.
As per the description shared, need to change the
below mentioned configuration.
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
To this one
//= require rails-ujs
//= require jquery
//= require turbolinks
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
Keep turbolinks after jquery always and try to load best_in_place() function after turbolinks loaded.
# application.js
//= require rails-ujs
//= require jquery
//= require turbolinks
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
# assets / javascripts / use_best_in_place.js
$(document).on('turbolinks:load',function(){
jQuery(".best_in_place").best_in_place();
}
I looked through some related questions suggesting how to maneuver the asset pipeline, but still am unable to get it to work.
index.html.erb:
<%= javascript_include_tag "playlist" %>
<div class="demo">
<div class="demoPlate plate" style="margin: 0 auto;">
</div>
</div>
application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
//= require_tree .
$(document).ready(function(){
$("#event_when").datetimepicker({
format:'Y/m/d H:i'
});
$("#user_dob").datetimepicker({
timepicker:false,
format:'Y/m/d',
maxDate:'0'
});
});
playlist.js:
$(function(){
$('.demoPlate').plate({
playlist: [
{"file":"files/morgantj_-_caf_connection_1.mp3"}
]
});
});
The files that the plugin need to be compiled are:
jquery-ui, jquery, plate.js, and they have playlist.js in the body.
I have tried all ends of the asset pipeline, but cant figure out what im missing.
The instructions they gave for installing are (Screenshots):
Part 1
Part 2
Any help is greatly appreciated!
If you put the following inside application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
You should have all of these files inside the directory of app/assest/javascripts
I will automatically loaded inside one file "application.js" , no need to declare or include inside <head></head> tag, unless you don't include the application.js file in layout.
you can also require playlist.js after setting up jquery plugins/dependencies
I've included the gem and ran bundle which includes all the files in the gem lib perfectly fine.
application.js looks as such:
//= require jquery
//= require jquery_ujs
//= require skrollr
//= require skrollr.stylesheets
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require_tree .
I've included this in the bottom of application.html.erb before the end of the body tag and also tried including in individual view as well:
<script type="text/javascript">
$(function(){
skroller.init();
});
</script>
and for calling this in the view I used the example provided by skrollr:
<div data-0="background-color:rgb(255,0,0);" data-500="background- color:rgb(0,0,255);">
WOOOT
</div>
but to my dismay I have not seen any effects. What could I possibly be missing?
<script type="text/javascript">
$(function(){
skrollr.init(); # skroller changed to skrollr
});
</script>
My Javascript is only loading after refreshing the page in Rails. After looking into it, the recommend solution seems to be to use turbolinks. However, when I include the jquery-turbolinks gem, JQuery itself seems to crash presumably due to some dependency error.
Uncaught TypeError: Cannot read property 'length' of undefined
Here's what my application.js file is looking like
//= require turbolinks
//= require angular/angular.min
//= require angular/angular-route.min
//= require jquery
//= require jquery_ujs
//= require jquery-ui.min
//= require jquery.turbolinks
//= require chosen-jquery
//= require bootstrap
//= require conversations
//= require analytics
//= require common
//= require jquery.infinite-pages
//= require jquery.contenthover
//= require overlay
//= require tag-it.min
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.
So to sum it up, if I don't use jquery-turbolinks, my JS won't load until after a page refresh. If I do use it, jQuery crashes. If i try to put it before require jquery, it can't find the JQuery file and said $ is not a function.
Order the jQuery.turbolinks just after jQuery
//= require turbolinks
//= require angular/angular.min
//= require angular/angular-route.min
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui.min
That's the way the jQuery.turbolinks will work correctly
I have searched for solutions for this issue and i have found that i have to run bundle exec rake assets:precompile before pushing to heroku inorder to make JavaScript working but its not working i don't know why. and the same for the local production
production.rb
config.cache_classes = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.compress = true
config.assets.compile = false
config.assets.precompile += %w( chartkick.js )
config.i18n.fallbacks = true
end
application.js
//= require jquery_ujs
//= require jquery
//= require jquery.ui.all
//= require bootstrap
//= require demo1
//= require polyfills
//= require announcements
//= require wice_grid
//= require ckeditor/init
//= require bootstrap-datepicker
//= require_tree .
Update: it not working in development. it was working few minutes ago.. :|
Update 2: it worked in development after reordering my application.js to the following:
//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require jquery.ui.all
//= require demo1
//= require polyfills
//= require announcements
//= require wice_grid
//= require ckeditor/init
//= require bootstrap-datepicker
//= require_tree .
and still doesn't work in production
You should set this:-
config.assets.compile = true