2

In development, I can't figure out how to make the jquery-ui gem to make it's sweet magic available.

I included the gem in the project Gemfile, typed bundle install, updated app/assets/stylesheets/application.scss to have the line: 

@import "jquery-ui/autocomplete";

and finally app/assets/javascripts/application.js to have the line:

//= require jquery-ui/autocomplete

more-or-less as described in https://github.com/joliss/jquery-ui-rails

When I try to load a page in development, rails complains saying

File to import not found or unreadable: jquery-ui/autocomplete.
Load paths:
  /home/dm/contra/app/assets/images
  /home/dm/contra/app/assets/javascripts
  /home/dm/contra/app/assets/stylesheets
  /home/dm/contra/vendor/assets/javascripts
  /home/dm/contra/vendor/assets/stylesheets
  /home/dm/.rvm/gems/ruby-2.2.1/gems/jquery-rails-4.0.5/vendor/assets/javascripts
  /home/dm/.rvm/gems/ruby-2.2.1/gems/coffee-rails-4.1.0/lib/assets/javascripts
  /home/dm/.rvm/gems/ruby-2.2.1/gems/angularjs-rails-1.4.8/vendor/assets/javascripts
  /home/dm/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/assets/stylesheets
...

Here's what the directory layout of the jquery-ui-gem looks like on this machine:

contents of ~/.rvm/gems/ruby-2.2.1/gems/jquery-ui-rails-5.0.5/

app  Gemfile  History.md  lib  License.txt  Rakefile  README.md VERSIONS.md

cocntents of ~/.rvm/gems/ruby-2.2.1/gems/jquery-ui-rails-5.0.5/app/assets/javascripts/jquery-ui

accordion.js         datepicker-da.js     datepicker-fr-CH.js  datepicker-ka.js     datepicker-nn.js     datepicker-ta.js     effect-bounce.js     effect-transfer.js
autocomplete.js      datepicker-de.js     datepicker-fr.js     datepicker-kk.js     datepicker-no.js     datepicker-th.js     effect-clip.js       menu.js
button.js            datepicker-el.js     datepicker-gl.js     datepicker-km.js     datepicker-pl.js     datepicker-tj.js     effect-drop.js       mouse.js
core.js              datepicker-en-AU.js  datepicker-he.js     datepicker-ko.js     datepicker-pt-BR.js  datepicker-tr.js     effect-explode.js    position.js
datepicker-af.js     datepicker-en-GB.js  datepicker-hi.js     datepicker-ky.js     datepicker-pt.js     datepicker-uk.js     effect-fade.js       progressbar.js
datepicker-ar-DZ.js  datepicker-en-NZ.js  datepicker-hr.js     datepicker-lb.js     datepicker-rm.js     datepicker-vi.js     effect-fold.js       resizable.js
datepicker-ar.js     datepicker-eo.js     datepicker-hu.js     datepicker-lt.js     datepicker-ro.js     datepicker-zh-CN.js  effect-highlight.js  selectable.js
datepicker-az.js     datepicker-es.js     datepicker-hy.js     datepicker-lv.js     datepicker-ru.js     datepicker-zh-HK.js  effect.js            selectmenu.js
datepicker-be.js     datepicker-et.js     datepicker-id.js     datepicker-mk.js     datepicker-sk.js     datepicker-zh-TW.js  effect-puff.js       slider.js
datepicker-bg.js     datepicker-eu.js     datepicker-is.js     datepicker-ml.js     datepicker-sl.js     dialog.js            effect-pulsate.js    sortable.js
datepicker-bs.js     datepicker-fa.js     datepicker-it-CH.js  datepicker-ms.js     datepicker-sq.js     draggable.js         effect-scale.js      spinner.js
datepicker-ca.js     datepicker-fi.js     datepicker-it.js     datepicker-nb.js     datepicker-sr.js     droppable.js         effect-shake.js      tabs.js
datepicker-cs.js     datepicker-fo.js     datepicker-ja.js     datepicker-nl-BE.js  datepicker-sr-SR.js  effect.all.js        effect-size.js       tooltip.js
datepicker-cy-GB.js  datepicker-fr-CA.js  datepicker.js        datepicker-nl.js     datepicker-sv.js     effect-blind.js      effect-slide.js      widget.js

What am I failing to do right here?

Dave Morse
  • 717
  • 9
  • 16

2 Answers2

1

You seem to be following the wrong README file. The one you are reading, is for Rails 5.0 and above.

Follow this doc for Rails versions before 5.0 - https://github.com/joliss/jquery-ui-rails/blob/v4.2.1/README.md

sidegeeks
  • 1,021
  • 3
  • 12
  • 17
  • Thank you - no dice. I tried, for example, updating the js include line to `//= require jquery.ui.autocomplete`, but got basically the same message. Looked around for the files on my machine, and there's no jquery.ui.autocomplete like there is in branch 4.2.1 of jquery-ui-rails. Conclusion: the documentation at https://github.com/joliss/jquery-ui-rails is referring to a jquery-ui version, not a rails version when it says "Warning: If you are using a version below 5.0, you will have to use a different naming for the files to require, see [link to 4.2.1 version of jquery-ui-rails-gem]" – Dave Morse Jan 18 '16 at 19:10
  • 2
    jquery hasn't crossed v2.2, and jquery-ui hasn't crossed v1.12 the last time i checked. Manifest files require you to restart the server on any changes to them. Have you done that after the change? – sidegeeks Jan 18 '16 at 19:16
  • 1
    I didn't think of restarting the server. That does the trick. Thank you! (Looks like the jquery-ui-gem has it's own version numbers that don't track jquery-ui: https://github.com/joliss/jquery-ui-rails/releases ) – Dave Morse Jan 18 '16 at 19:24
  • Happy to help. :) Click on the correct answer if it did. – sidegeeks Jan 18 '16 at 19:44
0

I've struggled with this in the past.. Just remove the /autocomplete part and leave the require and import to just jquery-ui and it will load the autocomplete by itself and the rest.

Got my autocomplete working with this coffeescript

jQuery -> $('#booking_product').autocomplete source: ['']

alexdotsh
  • 166
  • 1
  • 10