сохранение изменений javascript при использовании кнопки возврата браузера (jquery, rails 3) - PullRequest
Новая
       4

сохранение изменений javascript при использовании кнопки возврата браузера (jquery, rails 3)

1 голос
/ 09 декабря 2011

У меня есть галерея изображений, где пользователь может щелкнуть маленькую букву «х», чтобы заархивировать изображение (т. Е. Отправить его ниже, в галерее). Когда страница загружается, она разделяет изображения на наборы выше и ниже сгиба на основе логического поля в модели базы данных. Когда вы нажимаете «x», jquery вызывает ajax мой бэкэнд, чтобы обновить логический флаг, а затем я использую js, чтобы взять изображение и добавить его в правый раздел (то есть, если вы только что заархивировали его, он идет ниже линии, в противном случае он добавляется в верхний раздел). Все это хорошо работает, но если вы уйдете со страницы, а затем нажмете кнопку «Назад» браузера, чтобы вернуться, изображения отобразятся в своем первоначальном расположении (не «заархивированы» ниже сгиба). Как я могу сделать изменения, сделанные javascript, версией, которая будет сохранена и затем возвращена кнопкой назад?

images_controller.rb 

def archive
  @image.archived = !@image.archived
  @image.save
  respond to do |format|
    format.js
  end
end

галерея 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-<%=@image.archived ? 'archive':'active'%>').fadeIn('slow');
});

Ответы [ 3 ]

2 голосов
/ 08 августа 2014

Эта проблема связана с тем, что браузер кэшировал ваш ответ JS в виде текста и не может его выполнить. Я до сих пор не понял, почему он не работает, но вы можете предотвратить кэширование JS, добавив before_action метод: 

before_action :set_no_cache, only: [...]

с тем кодом внутри метода set_no_cache: 

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

Проверено в Chrome, Safari, Firefox.

2 голосов
/ 09 декабря 2011

Проблема в том, что браузер просто берет страницу так, как она хранится в кеше. Вы должны были бы заставить клиента получить новую копию, не позволяя кэшировать эту страницу.

Попробуйте это: 

<meta http-equiv="pragma" content="no-cache">
0 голосов
/ 09 декабря 2011

Одним из методов является использование хэша URL: 

yoursite.com#state_1=1&state2=55

При изменении состояния вы добавляете значимую информацию к текущему URL, используя document.location.hash='...' для его сохранения.Это может сказать вам, в каком разделе находится пользователь, а затем какое изображение он просматривает.

Когда вы перезагружаете страницу, ищите хэш и выполняете соответствующий JS, чтобы восстановить пользовательский интерфейс в предыдущем состоянии..

Это очень удобно, потому что пользователь может перезагрузить или добавить в закладки страницу, и она все равно будет работать.

...