如何在我的视图中包含一个 Jquery UI 滑块？答案

【问题标题】：How do I include a Jquery UI slider in my view?如何在我的视图中包含一个 Jquery UI 滑块？
【发布时间】：2018-07-01 16:09:54
【问题描述】：

我正在尝试将滑块 (http://simeydotme.github.io/jQuery-ui-Slider-Pips/#installation) 合并到我的视图中，这应该是 jquery-ui 的一部分。我的 Gemfile 中有这些

gem 'jquery-rails'
gem 'jquery-ui-rails'

当我打开 Gemfile.lock 时，我看到了

jquery-rails (4.3.1)
  rails-dom-testing (>= 1, < 3)
  railties (>= 4.2.0)
  thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
  railties (>= 3.2.16)

但是虽然我的页面上有这个 HTML

<div class="slider"></div>

我包含了这个 Javascript

$('.slider').slider().slider('pips');

我收到 JS 控制台错误

Uncaught TypeError: $(...).slider is not a function

当我的页面加载时。文档说我必须包含 jQuery 2.1.1 和 Jquery UI 2.1.1。我不知道我这样做是否正确。

编辑：包含 app/assets/application.js 的内容以响应给出的答案...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

【问题讨论】：

您使用的是什么版本的导轨？另外，问题出在开发或生产中还是两者兼而有之？
使用 `javascript_include_tag' 怎么样？ apidock.com/rails/ActionView/Helpers/AssetTagHelper/…
@AniketShivam，我在我的开发机器上使用 Rails 5.0.1。
@Natalia - 只需删除 //= require_tree 然后检查它是否正常工作

【解决方案1】：

似乎一切正常，您需要一些自定义，例如在文件顶部的assets/application.js 添加排序

//= require jquery
//= require jquery_ujs

确保jquery 没有渲染两次并且您的slider 库正确包含然后编辑您的滑块JS，如下所示

(function($){
    "use strict";
    $(document).on('ready', function(){
        $('.slider').slider().slider('pips');
    });
});

或者像下面这样

$(document).on('turbolinks:load', function(){
    $('.slider').slider().slider('pips');
});

对于重构，您可以在使用 <script type="text/javascript"> .... </script> 标签的滑块下方的同一页面上使用此 js

实现后重启服务器以获得更好的响应

答案评论更新

问题是你可能在它之前调用了 js 函数（JS 库）已加载。另外，检查一下

希望对你有帮助

【讨论】：

问题是您可能在加载 js 函数之前调用它，因为@fool-dev 表示您需要在页面准备好后调用它。您可以通过在浏览器中打开开发人员工具并粘贴 jQuery 函数 $('.slider').slider().slider('pips'); 来测试是否是这种情况。在 Javascript 控制台中。

【解决方案2】：

试试这个：在 html 中包含 js

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

然后看看它是否有效。

【讨论】：