Databases
StackOverflow2013
Postsdbo
POwill_paginate ajax with fade
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POwill_paginate ajax with fade
    text
    copied!<p>I'm trying to ajaxify my will_pagniate pagination in rails. I want to have the old page fade out and the new one fade in.</p> <p>Here's the relevant part of my controller:</p> <pre><code>respond_to do |format| format.html # new.html.erb format.js { render :update do |page| page.replace 'page', :partial =&gt; 'cur_page' end } format.xml { render :xml =&gt; @branch } end </code></pre> <p>The aforementioned partial:</p> <pre><code>&lt;div id="page"&gt; &lt;%= will_paginate %&gt; &lt;div id="posts"&gt; &lt;%= render @posts %&gt; &lt;/div&gt; &lt;%= will_paginate %&gt; &lt;/div&gt; </code></pre> <p>And the relevant part of application.js:</p> <pre><code>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() } }) } }) </code></pre> <p>The script seems to get killed on this line,</p> <pre><code> new Effect.fade(target, { duration: 0.3, afterFinish: function() </code></pre> <p>because I see the spinner.gif start, then no fading and the page is refreshed normally. I have got the ajax working before I tried to add Effect.Fade and Effect.Appear.</p> <p>Is this the right way to go about this? Should I put the effects in the controller instead?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload