Question

我正在使用Imagemagick / MiniMagick尝试创建一个用户可以编辑图像的界面。我正在使用jquery插件jcrop，然后我试图将coords发送回我的控制器进行裁剪，然后使用裁剪后的图像“刷新”页面。我不希望整个页面刷新，我希望裁剪的图像出现在同一页面上，而不是在他们点击按钮后去任何地方。

现在我甚至没有传递坐标，因为我只是想让更新部分与文本一起工作，但它似乎没有做任何事情。

$('#crop-image').click(function() {
    var x1 = $('#x1').val;
    var y1 = $('#y1').val;
    var w = $('#w').val;
    var h = $('#h').val;
    var assetid = $('#assetid').val;
    $.ajax({
      url: "/crop_image",
      data: assetid
    })
});

HTML：

Crop Your Own:<br>
<%= image_tag "#{@asset.file_name.url}", id: "jcrop-original" %><br>

  <%= hidden_field_tag(:x1, nil, id: 'x1') %>
  <%= hidden_field_tag(:y1, nil, id: 'y1') %>
  <%= hidden_field_tag(:x2, nil, id: 'x2') %>
  <%= hidden_field_tag(:y2, nil, id: 'y2') %>  
  <%= hidden_field_tag(:h, nil, id: 'h') %>
  <%= hidden_field_tag(:w, nil, id: 'w') %>
  <%= hidden_field_tag(:assetid, @asset.id) %>
<a href="#" id="crop-image" class="button radius">Crop Image</a><br>
<div class="panel" id="the-cropped">
Nothing has been cropped
</div>

路线：

  get '/crop_image', to: 'products#crop_image'

控制器：

  def crop_image
    @asset = Asset.find(params[:assetid])      
    #@mycropimage = MiniMagick::Image.open("public/#{@asset.file_name.url}")
    #@mycropimage.crop("#{params[:w]}x#{params[:h]}+#{params[:x1]}+#{params[:y1]}")
    #@mycropimage.write("public/uploads/asset/file_name/#{@asset.id}/mycropped_#{@asset.file_name.file.filename}")

    respond_to do |format|
      format.js
    end
  end

crop_image.js.erb

$('#the-cropped').html("Success");

我的理解是Ajax进入控制器响应.js文件，该文件更新了“＃the-cropped”中的HTML，但在我的chrome控制台中我得到了：

GET http://localhost:3000/crop_image 404 (Not Found)

有什么想法吗？

Rails Ajax请求无法更新页面

0 个答案: