[英]How to auto refresh after user uploads a photo?
因此,我有一个应用程序,允许用户上传照片并使用Jquery Crop插件进行裁剪。 但是,当他们裁剪并按保存时,只有刷新两次,您才能看到更新的裁剪图像。 上传完照片后,以及当用户单击“保存在裁切上”时,我想自动刷新页面。
然后,这应显示新裁剪的图像,而不是较旧的未裁剪的图像。
我该怎么办?
这是照片控制器:
class PhotosController < ApplicationController
before_filter :authenticate_user!
def show
@photo = Photo.find(params[:id])
end
def new
end
def create
@photo = current_user.photos.create(params[:photo])
end
def destroy
@photo = current_user.photos.find(params[:id])
@photo.destroy
end
def update
@photo = current_user.photos.find(params[:id])
respond_to do |format|
if @photo.update(params[:photo])
format.js
format.json { respond_with_bip(@photo) }
else
format.js
format.json { respond_with_bip(@photo) }
end
end
end
def add_as_profile
@photo = current_user.photos.find(params[:id])
if @photo.present?
current_profile_pic = current_user.profile_photo
if current_profile_pic.present?
current_profile_pic.update_attributes(profile_photo: false)
end
@photo.update_attributes(profile_photo: true)
notice = 'Profile picture updated'
else
notice = 'Photo not found!'
end
redirect_to :back, notice: notice
end
private
# Never trust parameters from the scary internet, only allow the white list through.
#not needed with protected_attributes gem
#def photo_params
# params.require(:photo).permit(:file, :attachable_id, :attachable_type, :image)
#end
end
照片部分(_photo.html.erb)
<li class='photo_<%= photo.id %>'>
<%= photo.profile_photo? ? '(current profile photo)' : '' %>
<%= link_to photo, remote: true do %>
<div class="photo_frame" id="frame_<%= photo.id %>" style="background-image: url('<%= photo.file.url(:large) %>');">
<%#= link_to image_tag(photo.file.large.url), photo, remote: true %>
</div>
<% end %>
<br />
<% if controller_name == 'home' && action_name == 'welcome' %>
<p class="summary-info"><%= best_in_place photo, :description, type: :textarea, nil: 'Enter a Caption' %></p>
<%= form_tag add_as_profile_photo_path(photo), class: 'form-inline', method: :put do %>
<%= button_tag 'Set as profile picture', class: 'btn btn-primary btn-lg photo-b' %>
<% end %>
<%= link_to "delete", photo, data: { confirm: 'Are you sure?' }, :method => :delete, remote: true, class: 'btn btn-primary btn-lg photo-b' %>
<div class="photo-up-down"> <a href="#">up</a> <a href="#">down</a> </div>
<% else %>
<p class="summary-info"><%= photo.description.present? ? photo.description : '-' %></p>
<% end %>
</li>
update.js
$( document ).ajaxStart(function() {
$( ".crop_message" ).html('Processing ....');
});
// $( document ).ajaxComplete(function() {
// $( ".crop_message" ).html('');
imageUrl = '<%= @photo.file.url(:large) %>'
$('#frame_<%= @photo.id %>').css("background-image", 'url(' + imageUrl + ')');
// });
$('#myModal').modal('hide');
您可以使用location.reload(true);
在javascript中重新加载页面location.reload(true);
。
( true
内部location.reload()
将强制页面硬刷新,而不是从缓存中获取。)
但是,您应该考虑解决方案的另一种选择。
您可以使用location.reload();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.