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

Question

所以我有一个应用程序，允许用户上传照片并使用 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');

Answer 1

您可以使用 location.reload(true); 在 javascript 中重新加载页面。
（location.reload() 中的 true 将强制页面被硬刷新，而不是从缓存中获取。）
但是，您应该考虑另一种解决方案。

Answer 2

您可以使用location.reload();