How to auto refresh after user uploads a photo?

Question

So I have an app that allows users to upload photos and crop them with Jquery Crop plugin. 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)

<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

You can re-load the page in javascript using location.reload(true); .
(The true inside location.reload() would force the page to be hard-refreshed and not fetched from the cache.)
However, you should think of a different alternative to your solution.

Answer 2

您可以使用location.reload();