Search code examples
jqueryruby-on-railsrubyjquery-uijcrop

Jcrop doesn't do anything

I've been following this Jcrop-with Paperclip tutorial: http://railscasts.com/episodes/182-cropping-images?view=asciicast and I've done everything exactly as it said to, but where in the tutorial the mouse pointer produces crosshairs when held over the image at 5:24, mine doesn't change at all; it's just a static image. I suspect my application isn't accessing either the jquery-ui or Jcrop files, but I can't imagine why not. Does anyone with jquery-ui/Jcrop experience see anything wrong with my code?

My assets/javascripts and assets/stylesheets both contain the respective linked files. I'm using Rails 4.0.10.

views/layouts/application.js: 

<head>
  <title>Application</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    "jquery-ui.min" %>
  <%= javascript_include_tag "external/jquery/jquery" %>
  <%= javascript_include_tag "jquery-ui.min" %>
</head>

views/things/crop.html.erb

<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
ready = $(function() {
  $("#cropbox").Jcrop();
});
</script>
<% end %>

$(document).ready(ready);
$(document).on('page:load', ready);


<%= image_tag @thing.avatar.url(:large), :id => "cropbox" %>

controllers/things.rb

def create
  @thing = Thing.new(thing_params)
  if @thing.save
    render :action => "crop"
  end
end

models/thing.rb

class Thing < ActiveRecord::Base
  has_attached_file :avatar, :styles => { :large => "500x500", :medium => "300x300>", :thumb => "50x50!" }, :default_url => "/images/:style/missing.png"
  validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
  # ...
end

EDIT: I tried to add some code to crop.html.erb to make turbolinks work properly, but nohing changed.

Solution

  • Based on your posted code, it appears that

    $(document).ready(ready);
$(document).on('page:load', ready);

    is not between <script> tags. Move those lines of code above the </script> and it should work.

    In addition, it appears you are missing <%= yield(:head) %> in your layout, so the content_for(:head) is likely not actually being added anywhere.