Wednesday, January 31, 2018

How do I include a Jquery UI slider in my view?

I'm trying to incorporate a slider (http://simeydotme.github.io/jQuery-ui-Slider-Pips/#installation) into my view, which is supposedly part of jquery-ui. I have these in my Gemfile

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

And when i open Gemfile.lock I see

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)

But although I have this HTML on my page

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

and I include this Javascript

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

I get the JS console error

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

when my page loads. The documentation says I have to include jQuery 2.1.1 and Jquery UI 2.1.1. I can't tell if I'm doing that properly or not.

Edit: Including content of app/assets/application.js in response to answer given ...

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

2 Answers

Seems everything is ok, you need some customization like on the assets/application.js top of the file add sorting like

//= require jquery //= require jquery_ujs

Make sure jquery not rendering twice and your slider library include properly then edit your slider JS like below

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

Or like below

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

For refactoring you can use this js on the same page underneath where your slider using <script type="text/javascript"> .... </script> tag

Restart the server after implementing this

Hope it helps

Try this instead: Include the js from within the html

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

See if it works after that.