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.

Answer 1

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

Answer 2

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.