Using jQuery remove() with cached pages (Rails backend)

3
votes

I'm using jQuery with a Rails 3 backend and I have the following scenario:

  1. User see's a comment on their post and wants to delete it
  2. User clicks the delete button and deletes the comment from the database
  3. jQuery uses remove() to remove the item from the DOM as an AJAX success response to step 2 above
  4. User navigates to a different page
  5. User hits the back button to go back to the page with the comment
  6. The old comment is still there, even though it was removed from the server and from the DOM

The comment in this scenario is obviously being cached by the browser and so it shows up even though it was previously deleted (and it doesn't exist on the server either).

How do you prevent the comment (or prior cached objects that have been removed from the DOM) from showing up when the user hits the back button?

By the way: Please don't say, "don't cache any pages" :) That is not an option.

3
javascriptjqueryruby-on-railsruby-on-rails-3browser-cache
tested on youtube commenting system. It has the same problem with yours :) – Sufendy
are you refreshing the cache on deleting the post? and what type of caching you are using page, action or fragment? – Naren Sisodiya
@Naren: We are using basic page caching right now and we are not refreshing anything. Is there a proper way to go about doing this or can you refresh only a certain part of the page? – iwasrobbed
yes, if you are using rails page cache then you should clear it on Create, Update and Delete actions. see guides.rubyonrails.org/caching_with_rails.html for more details – Naren Sisodiya
@Naren: thanks! please add your response as an answer below and I will mark it as the accepted answer – iwasrobbed

3 Answers

0
votes

if you are using rails page cache then you should clear it on Create, Update and Delete actions. see link for more details

0
votes

Answer One: If a user is uses a back button, they shouldn't be surprised when they see things from their past.

Answer Two: It's a little heavy handed, but you could try an ajax call in $(document).ready() that checks for outdated content. I'm not certain that would work. If not, you could set up an interval the ping to server to double check there's no outdated content on the screen. (I've had good performance with pings as frequent as 7 seconds)

I don't think there is a non-heavy handed way to do this (other than preventing caching ;)

0
votes

I don't know whenever it depends on browser, and it may break your RESTful routes, but what you can do, is issue a PUT/POST to the same URL the post originated from, and in the AJAX response disable caching (using the Cache-Control header). It should invalidate this URL in the browser's cache, as browsers usually don't discriminate using HTTP verbs.