Rails 4 - 引导滑块答案

【问题标题】：Rails 4 - bootstrap sliderRails 4 - 引导滑块
【发布时间】：2016-08-31 01:50:08
【问题描述】：

我正在尝试设置引导滑块以在我的 Rails 4 应用程序中工作。

在过去一年的大部分时间里，我一直在努力弄清楚如何让它发挥作用。

我已经尝试了此页面中 html/js 的所有组合： http://seiyria.com/bootstrap-slider/

我无法让它们中的任何一个工作。我没有收到任何控制台错误，并且可以在 chrome 检查器元素窗口中看到 div id。当我尝试使用它时，呈现的视图只是一个空白容器。

我有：

宝石文件

gem 'bootstrap-slider-rails'

应用程序.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 .

我也尝试过将 bootstrap-slider 移动到 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"/>

谁能告诉我在哪里可以找到有关如何使其工作的指导。我不明白为什么其他人都那么容易，而我却那么复杂。

控制台没有显示任何 js 错误。

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap bootstrap-slider

【解决方案1】：

根据Using bootstrap-slider with jQuery UI的建议，我将slider.js文件改成：

jQuery(document).ready(function() {
    $("#ex8").bootstrapSlider({
    tooltip: 'always'
    });
});

【讨论】：

【解决方案2】：

用途：

//= require slider

并更新slider.js：

jQuery(document).ready(function() {
  $("#ex8").slider({
    tooltip: 'always'
  });
});

【讨论】：

我也试过了。它不会改变任何东西。我的供应商资产中没有名为 slider.js 的文件
您忘记在slider.js 文件末尾写});。

【解决方案3】：

如果您使用的是 Turbolinks，请使用：

<script type="text/javascript">
  $(document).on('turbolinks:load',function(){

    // With JQuery
    $("#slider").slider();
    $("#slider").on("slide", function(slideEvt) {
      $("#sliderSliderVal").text(slideEvt.value);
    });

  });
</script>

【讨论】：