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

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/

Answer 2

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 3

I think I found a solution to this problem. I have a controller that has caches_action for an action that uses format.js to fetch some data via ajax, and it was not working out of the box.

I found that, despite the request being transmitted to the server, and the server correctly parsing the request and "rendering" the index.js.erb template, nothing was updating in the DOM. Your solution with $.ajax and dataType:'script' fixed the problem for me, however, I didn't like having to do jquery to bind to a click on a link, which should happen by default... I was able to make it work correctly by changing my link_to to this:

= link_to "click me", user_action_path(params), remote: true, data:{type: 'script'}

Hope this helps!

Answer 4

I've been having the same problem but on my 3.0.3 application with :remote => true I have added :'data-type' =>: script and have been worked fine.

However, in my case, I don't see improvement when loaded by ajax the list.