CODEWITHSUNDEEP
jqueryruby-on-railsjquery-uirubygemsslider
user7055375
user7055375

Reputation:

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 .

Upvotes: 3

Views: 991

Answers (2)

fool-dev
fool-dev

Reputation: 7777

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 for better response after implementing this

Update On Answer Comment

The issue is you're probably calling the js function before it's (JS Library) loaded. Also, check this

Hope it helps

Upvotes: 4

Hans-Eric Lippke
Hans-Eric Lippke

Reputation: 248

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.

Upvotes: 0

Related Questions