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中重新加载页面（true内的location.reload()会强制页面硬刷新，而不会从缓存中提取。）
但是，您应该考虑使用与解决方案不同的替代方案。

Answer 2

您可以使用location.reload();

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

2 个答案: