format.js is not manipulating dom once action caching enabled

Question

Note: I am presenting a logic here what I am doing.

What I am doing:

Think about the basic index action where we are listing products and with pagination. Now using remote-true option I have enabled ajax based pagination. So far things works perfectly fine. Take a look on sample code.

Products Controller:

 def index
  @products = Product.paginate(:order =>"name ASC" ,:page => params[:page], :per_page => 14)
   respond_to do |format|
     format.html # index.html.erb
     format.json { render json: @products }
     format.js
   end
 end

Index.html.erb

<h1>Products</h1>
<div id="products">
    <%= render "products/products" %> // products partial is just basic html rendering
</div>

<script>
$(function(){
   $('.pagination a').attr('data-remote', 'true')
});
</script>

Index.js.erb

  jQuery('#products').html("<%= escape_javascript (render :partial => 'products/products' ) %>");
  $('.pagination a').attr('data-remote', 'true');

So whats the problem:

Now I want to enable action caching on this. But index.js.erb file is not manipulating DOM. If I remove the remote-true functionality then things works fine with caching.

For action caching I have added this line on the top of the controller:

 caches_action :index, :cache_path => Proc.new { |c| c.params }

Any suggestions?

Update:

Problem is jquery code is not executing. From this question

I found out what's wrong. jQuery actually surround the incoming script with a so that the browser evaluates the incoming code. But the caching mechansim merely saves the code as text and when one re-request, it returns the code as text but not evaluate it. Therefore, one needs to eval the code explicitly

But how to solve this problem??

Answer 1

After some trial and error, I think I have a work around.

Page links

Instead of

$(function() { $('.pagination a').attr('data-remote', 'true') });

use

$(function() {
  $('.pagination a').click(function() {
    $.ajax({
      url: this.href,
      dataType: 'script'
    });
    return false;
  });
});

so response created by the app server will be run as javascript

Controller

next, change your caches_action line to

caches_action :index, cache_path: proc { |c| c.params.except(:_).merge(format: request.format) }

since ajax appends a _ params for some sort of timestamp

Hopefully this works :)

Answer 2

I don't see what the issue should be with using remote: true. Someone else suggested to use .ajax instead of remote: true, but that's exactly what the remote functionality does, so there shouldn't be any difference.

The other answer has code that explicitly uses jQuery.ajax, but the only difference in their code compared to what the remote functionality does is that they're specifying an explicit dataType. You can actually do that with remote: true though.

In your HTML link, you just need to specify data-type="script". Or, based on your posted JS, you'd do this:

$(function(){
   $('.pagination a').attr('data-remote', 'true').attr('data-type', 'script');
});

EDIT: Also, I wrote more in-depth about the data-type attribute and how it works with Rails here: http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/