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