Jcrop 什么都不做答案

【问题标题】：Jcrop doesn't do anythingJcrop 什么都不做
【发布时间】：2023-03-29 23:49:01
【问题描述】：

我一直在关注这个 Jcrop-with Paperclip 教程：http://railscasts.com/episodes/182-cropping-images?view=asciicast 并且我已经按照它所说的做了所有事情，但是在教程中鼠标指针在 5:24 停留在图像上时会产生十字准线，我的完全没有改变；它只是一个静态图像。我怀疑我的应用程序没有访问 jquery-ui 或 Jcrop 文件，但我无法想象为什么不访问。有 jquery-ui/Jcrop 经验的人看到我的代码有什么问题吗？

我的 assets/javascripts 和 assets/stylesheets 都包含各自的链接文件。我正在使用 Rails 4.0.10。

视图/布局/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

编辑：我尝试向crop.html.erb 添加一些代码以使turbolinks 正常工作，但没有任何改变。

【问题讨论】：

您在使用 Turbolinks 吗？您是否为 $(document).ready() 添加了任何常用的“使 Turbolinks 行为合理”的技巧？
@muistooshort 我确实有 Turbolinks，因为我使用的是教程给出的 gemfile，但我已经用它做了任何事情。你指的这些黑客是什么？
用谷歌搜索“jquery turbolinks”，你会发现一些东西。
确认 turbolinks 问题的最佳方法是，当您通过链接到达该页面时页面无法正常工作，而当您刷新页面时该页面开始工作。刷新页面会使 Jcrop 工作吗？
@ptd 不，刷新页面不会改变任何东西。

标签： jquery ruby-on-rails ruby jquery-ui jcrop

【解决方案1】：

根据您发布的代码，看来

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

不在<script> 标签之间。将这些代码行移到</script> 上方，它应该可以工作。

此外，您的布局中似乎缺少<%= yield(:head) %>，因此content_for(:head) 可能实际上并未添加到任何地方。

【讨论】：

不错，但这并没有改变任何东西。
@user3739453 ，我刚刚在您的代码中发现了另一个问题并更新了我的答案。
@Ahh，就是这样。谢谢！我会在 6 小时后奖励赏金。