0

I'm trying to use this plugin in my Rails app: https://github.com/pguso/jquery-plugin-circliful

I set it up exactly as instructed, with the following in application.html.erb:

   <link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.circliful.min.js"></script>

And the following in my view:

<div class="row">
    <div class="col-md-12">
        <div id="your-circle"></div>
    </div>
</div>

<script>
    $( document ).ready(function() {
    $("#your-circle").circliful({
                animationStep: 5,
                foregroundBorderWidth: 5,
                backgroundBorderWidth: 15,
                percent: 75
           });
   });
</script>

In the javascript console I see the following 404 errors: 

GET http://localhost:3000/contestants/js/jquery.circliful.min.js 
GET http://localhost:3000/contestants/css/jquery.circliful.css 
GET http://localhost:3000/contestants/js/jquery.circliful.min.js 404 (Not Found)
Uncaught TypeError: $(...).circliful is not a function
    at HTMLDocument.<anonymous> (12:168)
    at i (jquery-1.12.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
    at Function.ready (jquery-1.12.4.min.js:2)
    at HTMLDocument.K

I'm not sure what could be wrong since I am copying and pasting from the documentation. Any help is appreciated.

Ellen Cooper
  • 11
  • 1
  • Try to add these CDNs before your application script tag in application.html.erb and call your document.ready as $(document).on('turbolinks:load', function() {...} – Ankush Malik Sep 13 '17 at 05:09
  • see [ruby-on-rails-4-how-to-include-javascript-files-in-rails-web-application](https://stackoverflow.com/questions/22297700/ruby-on-rails-4-how-to-include-javascript-files-in-rails-web-application) as well, it works a little differently in rails and the snippet on the readme won't work. As a quick fix you can put the script in the public/ directory and reference it with just `src='./jquery.circliful.min.js'` – max pleaner Sep 13 '17 at 06:00

1 Answers1

0

First, Did you downloaded jquery.circliful.css, jquery.circliful.min.js files?

If not first download this files and save in vendor/assets folder of your rails app,

then use javascript_include_tag('jquery.circliful.min') instead of script tag and stylesheet_link_tag('jquery.circliful') instead of link tag

ShilpeshAgre
  • 291
  • 2
  • 9
  • Thanks! That, along with adding the following to config/initializers/assets.rb, worked. Rails.application.config.assets.precompile += %w(jquery.circliful.min.js) Rails.application.config.assets.precompile += %w( jquery.circliful.css ) – Ellen Cooper Sep 13 '17 at 13:23