Unable to use jQuery plugin placed in the Ruby on Rails vendor folder

Question

I am trying to use the jQuery library Knob to create a functioning dial/meter system for an interactive optimization system. I've added the library to my vendor folder and included the vendor javascripts folder in my application.js.

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.

In my view I've added some test code to make sure jQuery works correctly and it works (I know, I know, separation of concerns -- I'll move the JS over to an assets folder once I've finished testing).

app/views/static_pages/simutronx.html.erb

<% provide(:title, "The SimutronX") %>
  <h1>The SimutronX</h1>
  <p>Some test text</p>
  <input type="text" class="dial" data-min="-50" data-max="50">
  <%= javascript_tag do %>
    $(document).ready(function(){
      $("p").hide();  
      $(".dial").knob();
    });
  <% end %>

It looks from documentation as if the library should style the .dial class as a dial but it does not. Rather, the input field remains as a standard input field. Also, roughly 50% of the time the test text fails to hide on page load.

What could be going wrong?

Update

I have checked and it seems that both jQuery and the plugin are at least sometimes being loaded via the asset pipeline.

However, not only does the plugin JavaScript fail to work (which I could have accepted as plausibly a library problem -- though unlikely given the popularity of the library), but half the time the jQuery still isn't working, even though it appears to be loading correctly, and the code has the document ready function in place, which would have been my first idea for the cause of the problem...

I have now also added these jQuery and the jQuery Knob plugin to assets.rb.

Rails.application.config.assets.precompile += %w( jquery-3.2.0.min.js )
Rails.application.config.assets.precompile += %w( jquery.knob.min.js )

I have added a jQuery include tag to my layout view.

<%= javascript_include_tag "jquery-3.2.0.min", "application" %>

I have added the jQuery Knob plugin in the view itself, simuntronx.html.erb.

<%= javascript_include_tag "jquery.knob.min" %>

I have tested inline JavaScript in the simuntronx.html.erb view.

<p onclick="this.style.backgroundColor='#990000'">Some more test text</p>

Inline JavaScript appears to work every single time.

require_tree is not recommended. If you have require_tree in your application.js it mean the order in which the js files will be loaded will be alphabetical and usually when you load js file you need to use a specific order. plus do you have errors in your console? go to `localhost:3000/assets/nameofyourjsfile.js` . Does your js get loaded fully or is empty? Thanks — Fabrizio Bertoglio, Mar 14 '17 at 07:04
I would need to know if the file at localhost:3000 is empty or it just does not exist? for example `localhost:3000/assets/jquery.knob.js` or can you find the code inside from jquery.knob inside the application`localhost:3000/assets/application.js` — Fabrizio Bertoglio, Mar 15 '17 at 14:58
I'm running through cloud9 and the puma server is not running on port 3000 so nothing shows there at all. However, the localhost path on port 8080 does show the full js for `/assets/jquery.knob.min.js`. — , Mar 15 '17 at 15:01
did you run`RAILS_ENV=production bundle exec rake assets:precompile`? You can also run `rake assets:precompile`. So you find out the fingerprinted version of the file in production and development. Then you can inspect you production page and with the debugger console developer tollbar of your browser find out which version of the fingerprinted file you browser is seeing. With chrome you should check your js code in the unminified version. Chrome allows you to do it, so you can see if you jquery.knob code is there. What do you think? — Fabrizio Bertoglio, Mar 15 '17 at 15:27
Do you have this problem only in production? Can you send us your page? — Fabrizio Bertoglio, Mar 15 '17 at 15:29
I'm currently working in development. However, I can push to production and link to the page I'm developing. Just a minute. — , Mar 15 '17 at 15:31
https://boiling-dawn-38516.herokuapp.com/simutronx . Same problem in development and production, though even the test jQuery doesn't seem to work in production, whereas it did half the time in development. Am I requiring in my JavaScript correctly on the page? — , Mar 15 '17 at 15:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138140/discussion-between-fabrizio-bertoglio-and-rails-kiddie). — Fabrizio Bertoglio, Mar 15 '17 at 17:19
If you were able to get the application.js working, then you need to make sure that your jquery file will be loaded too. In development with chrome you can check that every .js file is loaded — Fabrizio Bertoglio, Mar 17 '17 at 10:37
Just looking into it in depth now based on the info provided thus far. Been unexpectedly busy the last few days (epicly long emails from a client yada yada :/ ) On inspection, the jQuery is always loading in development, but the test text is only hiding about 50% of the time, again. — , Mar 17 '17 at 11:15

score 0 · Answer 1 · edited May 23 '17 at 12:09

I solved a similar problem where I could not use effects from jquery-ui. I found the solution by creating a testing controller with a specific layout.

Read more hear to create a specific layout rails assets in production not served (yet another assets issue)

In this layout I would use cdn version of jquery and jquery-ui and as it would work with CDN and not with the jquery-ui gem, I understood that a first problem was with the gem.

Downloading jquery-ui (which included also jquery files) and including jquery and jquery-ui in my vendor/assets/javascripts and stylesheets solved the problem

The other javascript files would not cause any other problem, but using this testing controller to test also the stylesheets, I discovered that a specific custom css stylesheet was breaking the jquery-ui effect.

I could solve this problem by removing the stylesheet, but a lot of nice effect where there included (as I am using a layout).

At this point i just started with chrome developer tools to uncomment all the css properties that the link had, so that I found out, by testing the effect which property was creating problems

For example the css property that did create conflicts was with the a tag

a {
    color: #28c3ab;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

I'll take a look into things on the basis of this info and await anything additional. Thanks for taking the time out on this. It's very much appreciated. — , Mar 15 '17 at 17:53
Hi Fabrizio. I have updated with additional troubleshooting step. I am available in the chat room whenever you are :). — , Mar 17 '17 at 11:39

score 0 · Accepted Answer · answered Mar 17 '17 at 14:49

0

I have located the source of the problem, which was an issue with the knob.js and kontrol.js libraries themselves. The libraries were failing to parse due to an error in the current distribution files, which was in turn causing the jQuery to fail to work intermittently, as the browser attempting to include the plugins and failing seems to have interfered with the interpreting of the jQuery code itself. Once I removed these, jQuery worked fine.

I have now added a different js library which is working without issue.

answered Mar 17 '17 at 14:49

1

I am very happy that you were able to solve this problem. Actually I am following many open issue similar to this one and I opened myself a question for a problem with Jquery-ui effect. Please give us a detailed explanation on how you solved this issue, as it may help me and many other and check out my question at the following link. Best Regards. Fabrizio http://stackoverflow.com/questions/42861706/rails-asset-pipeline-problems-with-jquery-ui – Fabrizio Bertoglio Mar 17 '17 at 18:40
I literally just removed the two jQuery libraries and that was it. However, there seem perhaps to have been residual issues as you can see here http://stackoverflow.com/questions/42864649/javascript-libraries-works-fine-in-rails-development-env-but-not-in-heroku-produ – Mar 17 '17 at 18:41

Unable to use jQuery plugin placed in the Ruby on Rails vendor folder

2 Answers2