[英]How to auto refresh after user uploads a photo?
So I have an app that allows users to upload photos and crop them with Jquery Crop plugin. 因此,我有一个应用程序,允许用户上传照片并使用Jquery Crop插件进行裁剪。 However, when they crop and press save you don't see the updated cropped image until you refresh twice.
但是,当他们裁剪并按保存时,只有刷新两次,您才能看到更新的裁剪图像。 I'd like to automatically refresh the page once the photo is upload, and again when the users clicks save on crop.
上传完照片后,以及当用户单击“保存在裁切上”时,我想自动刷新页面。
This should then show the newly cropped image instead of the older uncropped one. 然后,这应显示新裁剪的图像,而不是较旧的未裁剪的图像。
How might I do this? 我该怎么办?
Here's the photos controller: 这是照片控制器:
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
The photos partial (_photo.html.erb) 照片部分(_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 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');
You can re-load the page in javascript using location.reload(true);
您可以使用
location.reload(true);
在javascript中重新加载页面location.reload(true);
. 。
(The true
inside location.reload()
would force the page to be hard-refreshed and not fetched from the cache.) (
true
内部location.reload()
将强制页面硬刷新,而不是从缓存中获取。)
However, you should think of a different alternative to your solution. 但是,您应该考虑解决方案的另一种选择。
您可以使用location.reload();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.