Rails Rails4 + Carrierwave + Jcrop + Bootstrap-Modal 怎么在上传图片后，跳转到 modal 裁剪图片？
1、我用的是
Rails4+Carrierwave+Jcrop+Bootstrap-Modal
2、当我试着按
https://www.driftingruby.com/episodes/cropping-images-with-jcrop
``` 这个案例做图片上传并裁剪，可以按要求完成。相关的代码为：
users_controller.rb:
```erb
def create
@user = User.new(user_params)
if @user.save
if params[:user][:avatar].present?
render :crop
else
redirect_to @user, notice: "Successfully created user."
end
else
render :new
end
end
def update
@user = User.find(params[:id])
if @user.update_attributes(user_params)
if params[:user][:avatar].present?
render :crop
else
redirect_to @user, notice: "Successfully updated user."
end
else
render :new
end
end
...
def user_params
params.require(:user).permit(:name, :avatar, :crop_x, :crop_y, :crop_w, :crop_h)
end
这个方法是在图片上传完成后，然后跳转到 crop.html.erb 页面来进行裁剪图片。现在，我需要的是怎么能在图片上传完成后，打开 bootstrap-modal 来裁剪图片？这个问题困扰了我好几天，在 stackoverflow 上也没能得到答案。我是 Rails 初学者，所以非常感谢大家能帮我解答。 stackoverflow 上有类似的问题，但是好像也没能解答： https://stackoverflow.com/questions/21027034/rails-carrierwave-jcrop-bootstrap
@liukun_lk 谢谢你的关注，但是怎么打开 modal 呢？我后来看了别人的代码，做了修改。如下：
def update
@user = User.find(params[:id])
if @user.update_attributes(user_params)
if params[:user][:picture].present?
respond_to do |format|
format.html do
flash[:warning] = "Template missing"
redirect_to @user
end
format.js { render template: 'users/update.js.erb'}
end
else
redirect_to @user
flash[:success] = "更新成功"
end
else
render :edit
end
end
update.js.erb 内容为：
$('#uploadModalContent').html("<%= j render "users/modal"%>");
$('#upload-modal').modal('show');
show.html.erb 内容为：
<%= form_for @user, :html => {:multipart => true} do |f| %>
<div class="row " id="user_avatar_crop">
<!-- 图片选择-->
<div class="col-md-12">
<%= f.file_field :picture, id: :user_avatar, onchange: 'this.form.submit()'%>
</div>
</div>
<% end %>
<!-- Modal -->
<div id="uploadModalContent">
</div>
<!-- 展示用户更新后的图片 -->
<% if @user.picture? %>
<%= image_tag @user.picture.url(:thumb), :alt => @user.name+"_avatar" %>
<% else %>
<%= image_tag @user.picture.url(:thumb),:alt => @user.name+"_default" %>
<% end %>
但是不能加载 format.js { render template: 'users/update.js.erb'}，后来看了另一个例子，说是如果跳转到 bootstrap modal，需要在链接上加 data-remote="true",如：
<%= link_to "Edit", edit_user_path(@user), remote: true, class: "btn btn-info" %>
这样是可以打开 modal 的。但是我的需求是在图片上传完成后，即 onchange: 'this.form.submit()' 完成后，再跳到 modal 进行裁剪，那么该怎么添加跳转语句呢？非常感谢~
@liukun_lk 请问下我该怎么修改代码呢？如果是用这样的方法：
<script>
$(function () {
$("#user_avatar").on("change",function () {
$("#upload-modal").modal("show");
})
})
</script>
这个 modal 窗口会一闪而过，就是先执行 js 代码，然后再通过 user_controller.erb 中跳转页面
非常感谢~
一闪而过可能是你刷新页面了，也许你需要的是 http://caibaojian.com/javascript-stoppropagation-preventdefault.html
