Javascript 用户上传照片后如何自动刷新？

因此，我有一个应用程序，允许用户上传照片并使用Jquery裁剪插件进行裁剪。但是，当他们裁剪并按save键时，只有刷新两次，才能看到更新的裁剪图像。我想在上传照片后自动刷新页面，在用户单击“在裁剪时保存”时再次刷新页面

这将显示新裁剪的图像，而不是旧的未裁剪图像

我该怎么做

这是照片控制器：

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

class photocontroller

照片部分（_photo.html.erb）

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');

$（文档）.ajaxStart（函数（）{
$（“.crop_message”）.html（'处理…'）；
});
//$（文档）.ajaxComplete（函数（）{
//$（“.crop_message”）.html（“”）；
imageUrl=“”
$（'#frame''）.css（“背景图像”，“url（'+imageUrl+）”）；
// });
$（'#myModal'）.modal（'hide'）；

您可以使用

location.reload（）

您可以使用

location.reload（true）在javascript中重新加载页面

（
location.reload（）
中的
true
将强制页面硬刷新，而不是从缓存中获取。）

但是，你应该想出一个与你的解决方案不同的替代方案。
谢谢，好奇为什么你认为我应该考虑一个不同的解决方案？上面的问题是什么？更多的是讨论方法。在裁剪页面以获得所需结果后，刷新页面并没有什么“错误”，但从用户体验的角度来看，这似乎并不好。更好的办法是找出“为什么”，在您的案例中，它需要刷新，并且在您找到原因后，找到替代解决方案。现在，您可以随时使用刷新方法。
$( 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');