CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-3back-button
Bee
Bee

Reputation: 14427

keeping javascript changes when I use the browser back button (jquery, rails 3)

I've got a gallery of images where the user can click a little 'x' to archive the image (i.e. send it below-the-fold in the gallery). When the page is loaded it separates the images into the sets above and below the fold based on a boolean field in the database model. When you click the 'x' jquery makes an ajax call to my backend to update the boolean flag, and then I use js to take the image and append it to the right section (i.e. if you just archived it it goes below the line, otherwise it's added back to the top section). All of this framework works great, but if you navigate away from the page and then use the browser back button to return, the images show up in their original location (not 'archived' below the fold). How can I make the changes made by the javascript be the version that gets stored and then returned to by the back button?

images_controller.rb

def archive
  @image.archived = [email protected]
  @image.save
  respond to do |format|
    format.js
  end
end

gallery html:

<div id="images-active" class="images">
  <% @images.each do |img| %>
    <%= content_tag_for(:div, active, :class=>"goal_blurb") do %>
      <div class="image">
        <%= link_to(archive_path(img), :method=>'get', :remote=>true ) do %>
          <span class="close">X</span>
        <% end %>
        <%= image_tag( img.path ) %>
      </div>
    <%end%>
  <% end %>
</div>
<div class="images" id='images-archive'>
<% @arch_images.each do |img| %>
    <%= content_tag_for(:div, active, :class=>"goal_blurb") do %>
      <div class="image">
        <%= link_to(archive_path(img), :method=>'get', :remote=>true ) do %>
          <span class="close">X</span>
        <% end %>
        <%= image_tag( img.path ) %>
      </div>
    <%end%>
<% end %>
</div>

archive.js.erb

$('#<%= dom_id(@image) %>').fadeOut('slow', function(){
  $(this).appendTo('#images-<%[email protected] ? 'archive':'active'%>').fadeIn('slow');
});

Upvotes: 1

Views: 2220

Answers (3)

Henry Le
Henry Le

Reputation: 1411

This issue is because browser cached your JS response as text and fails to execute it. I haven't figured out clearly why it fails yet but you can prevent JS caching by adding before_action method:

before_action :set_no_cache, only: [...]

with those code inside set_no_cache method:

if request.format == "js"
  response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' # HTTP 1.1.
  response.headers['Pragma'] = 'no-cache' # HTTP 1.0.
  response.headers['Expires'] = '0' # Proxies.
end

Tested in chrome, safari, firefox.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

One technique is to use a URL hash:

yoursite.com#state_1=1&state2=55

As you change state, you add some meaningful information to the current URL using document.location.hash='...' to store it. This can tell you which section the user is on, then which image they are viewing.

When you re-load the page, look for the hash, and execute the appropriate JS to restore the UI to the previous state.

This is pretty handy because the user can reload or bookmark the page and it will still work.

Upvotes: 0

Dominic Goulet
Dominic Goulet

Reputation: 8113

The problem is that the browser simply takes the page as it is stored in it's cache. You would have to force the client to get a fresh copy of it by not allowing this page to be cached.

Try this :

<meta http-equiv="pragma" content="no-cache">

Upvotes: 2

Related Questions