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??

Down

Try caches_action :index, :cache_path => Proc.new { |c| c.params.merge(format: request.format.to_s) } – Latinalatinate

Could you check if caches_action also caches the partial you render? Open your browser console and check the response you're getting. In that case, your problem wouldn't be that it doesn't update the DOM but updates it with the same partial, therefore same results. – Percussive

@Percussive New partial is rendering but its not updating the dom. Take a look on this post. I double checked no issue in javascript alfajango.com/blog/rails-js-erb-remote-response-not-executing – Down

Not what I meant. What I meant is that possibly the partial rendered by your index.js.erb is being cached. So it's not throwing any errors, simply rendering the same partial again and therefore look like it wouldn't be updating. – Percussive

No its changing.. I checked that thing.. – Down

@Latinalatinate Js code is not executing when caching enabled. Else its working perfectly fine.. – Down

@Latinalatinate PLease check update section of the question.. – Down

Just to make sure: the ajax-pagination does work when you switch off caching? – Pasturage

@Pasturage its working perfectly fine. I tried it by disabling browser javascript – Down

Maybe I was not clear: my understanding is that the server-side caching somehow interferes with the ajax pagination. Does the ajax-pagination work if you turn off the server-side caching? If you turn off the browser javascript the ajax will not work at all (since you are not using javascript). I have had a problem where jQuery/browser was doing the caching, not the server. – Pasturage

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/

Savoirvivre

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 :)

Latinalatinate

its not working :( Please check the updated section. I think that makes some sense.. – Down

remember that you need to clear your cache before you add this code. i've tested this one on a sample app and I can assure that it is working. – Latinalatinate

Also I am using remote=> true. and I am in a middle of a massive upcoming product.. – Down

hmm.. Lemme try that on a separate test application. – Down

dont use remote: true. let ajax handle your links instead of relying on remote: true. btw, i forgot a return false inside the js. – Latinalatinate

Lemme try the same.. I will be back soon. – Down

:) worked perfectly fine :) I have enabled this for my main page of the application but my application is heavily ajax based you can say its just 3 page application and there are more than 50 actions and all are done via remote true. How can we figure out that thing.. – Down

Thanks a lot.. Bounty awarded :) – Down

Ok, maybe accept the answer? So we know the question is answered. – Pasturage

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!

Fresnel

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.

Elenoraelenore

@javi Problem fixed using this |c| c.params.except(:_) – Down

I have used too, but if I don't put data-type => script don't work, response will not load. – Elenoraelenore