Will_paginate ajax with fade

Question

I am trying to ajaxify my will_pagniate pagination in rails. I want the old page to disappear and the new page to fade.

Here is the relevant part of my controller:

respond_to do |format| format.html # new.html.erb format.js { render :update do |page| page.replace 'page', :partial => 'cur_page' end } format.xml { render :xml => @branch } end 

The above partial:

 <div id="page"> <%= will_paginate %> <div id="posts"> <%= render @posts %> </div> <%= will_paginate %> </div> 

And the corresponding part of application.js:

 document.observe("dom:loaded", function() { // the element in which we will observe all clicks and capture // ones originating from pagination links var container = $(document.body) if (container) { var img = new Image img.src = '/images/spinner.gif' function createSpinner() { return new Element('img', { src: img.src, 'class': 'spinner' }) } container.observe('click', function(e) { var el = e.element() if (el.match('.pagination a')) { el.up('.pagination').insert(createSpinner()) target = $('posts') new Effect.fade(target, { duration: 0.3, afterFinish: function() { new Ajax.Request(el.href, { method: 'get', onSuccess: function(){ new Effect.Appear(target, {duration:0.3})} }) }}) e.stop() } }) } }) 

The script seems to be killed on this line,

  new Effect.fade(target, { duration: 0.3, afterFinish: function() 

because I see spinner.gif running, then it doesn’t disappear, and the page refreshes normally. I have ajax work before I tried to add Effect.Fade and Effect.Appear.

Is this the right way? Should I put effects in the controller instead?

Answer 1

Here is what I used with jQuery and worked well too :)

Put your call to will_paginate helper view in div

 #tickets_pagination = will_paginate @tickets 

In application.js

 $("#tickets_pagination .pagination a").live("click", function() { $.get("/users/?"+this.href.split("?")[1], null, null, "script"); return false }); 

Javascript above converts #tickets_pagination links to #tickets_pagination on ajax links

In your controller, as usual

 def index @tickets = Ticket.all.paginate({:page => params[:page], :per_page => 10 }) respond_to do |format| format.js format.html end end 

Now finally in index.js.erb

 $("#tickets_list_table").fadeOut('slow'); $("#tickets_list_table").html("<%= escape_javascript(render :partial =>'tickets/tickets_table', :locals => {:tickets => @tickets}) %>"); $("#tickets_list_table").fadeIn('slow'); 

Here tickets/ticket_table is a table listing all tickets. Partial displayed in div #ticket_list_table

Hope this works for you too.

Answer 2

I tried to add more work to javascript helpers:

 respond_to do |format| format.html # new.html.erb format.js { render :update do |page| page.visual_effect :fade, 'posts', :afterFinsh => "function(){" + page.replace 'page', :partial => 'cur_page' + page.visual_effect(:appear, 'branches') + "}" end } format.xml { render :xml => @branch } end 

Then remove this part of javascript:

 new Effect.fade(target, { duration: 0.3, afterFinish: function() 

I get the effect that I want, but everything is not in order. The request ends and the html is replaced,, then the div disappears and then reappears!

Answer 3

Not very familiar with RoR, does it generate its own client-side JS that can fight your code?

If not, I would say that the problem is somewhere in your own client code. For testing, get rid of the HREF attribute from the anchor tag and put the URL as a string literal in the Ajax request. If nothing happens, there is a problem with the Ajax request itself. If the page loads as expected, the event in the source script will not be completely stopped.

Also, clean your JS a bit to be sure that you need to use half columns in the end.

Answer 4

You seem to have mixed up the situation a bit. Either you write $('posts').fade , or new Effect.fade('posts') .

Secondly, I can not find the afterFinish option in the documentation .

So, I would suggest something in the following lines:

 container.observe('click', function(e) { var el = e.element() if (el.match('.pagination a')) { el.up('.pagination').insert(createSpinner()) target = $('posts') new Effect.fade('posts', { duration: 0.3}); setTimeout("new Ajax.Request(el.href, { method: 'get', onSuccess: function(){ new Effect.Appear('posts', {duration:0.3}) } })", 1000); e.stop(); } }) 

Hope this helps.