Creating Simple Ajax Pagination with CakePHP 1.3 and Mootools
Adding required helper + component
In order to easily do ajax pagination, we’re going to start off by adding:
to our controller, this will set us up to use the mootools adapter in the
JsHelper and the
RequestHandler for automatic disabling of layouts on ajax requests.
Prepare the layout.
In order to use mootools, we’ll need to add it to our layout. Download the latest release of mootools, and save it to
app/webroot/js. Inside the
<head> element add
- <?php echo $html->script('mootools'); ?>
Where ‘mootools’ is the name of the file you saved. Also ensure that you have a single element wrapping
$content_for_layout. Mine looks like
- <div id="content">
- <?php echo $content_for_layout; ?>
A single wrapping div with an id will make updating it later that much easier. The helpers automate replacing a single element, if you have different layout requirements, then your code will be a bit different.
Setting up the paginator helper
Next we need to let the
PaginatorHelper know that we will want to create ajax links using the
- <?php $paginator->options(array(
- 'update' => '#content',
- 'evalScripts' => true
evalScripts option is passed into the
eval() any script tags it finds in the response html. At the bottom of our index.ctp, after all the paging links add:
- <?php echo $js->writeBuffer(); ?>
evalScripts the events are rebound, allowing chained Ajax requests.
If you refresh the page you should now have functioning Ajax pagination. However, we can add a bit more spice with some additional effects. By adding a few more options, we can enable a simple fade in / fade out.
Awesome! The more I see examples with the JsHelper, the more I get excited about it. I’m Really looking forward to the release of 1.3. Keep up the great work!
Nick on 10/27/09
I do have a question, if I were using Prototype as my JS Library would my update option change from ‘#content’ -> ‘content’ (notice the lack of #). Or does the JsHelper use $$() instead of $() for Prototype element grabbing?
Nick on 10/27/09
Nick: With prototype you would still use ‘#content’. The prototype adapter will use
$$()based on the selector you provide. The same is true of the Mootools adapter.
mark story on 10/27/09
In order to use mootools, weâ€™ll need to add it to our layout. Download the latest release of mootools, and save it to app/webroot/js
Are we supplosed to save this file as mootools.js and do you recommend the YUI Compressed version of Mootools like it is recommended on the Mootools site?
Jon on 10/31/09
Jon: I use the compressed mootools, in production situations. While developing I much prefer the uncompressed source. It makes debugging with Firebug/webinspector far less painful.
mark story on 10/31/09
mark story: What are you using for compressing js files? Nice, simple solution is showen here http://www.milesj.me/blog/read/32/CSSJSAsset-Compression-In-CakePHP What I miss is merge js files into one file.
LuboÅ¡ on 11/14/09
Mark, great post and great work. I’ve used your example with jQuery but the events don’t seem to chain correctly. The first ajax request is successful however as it does not seem to bind the events in the ajax reply, it results in a non-ajax request on second event.
evalScripts does not seem to have any affect with jQuery – is this a known limitation or have I missed something?
Ryan on 12/14/09
Thanks – this helped me.
Can I produce two simultaneous effects? For example, can I fade out my content div and show my progress/spinner div, then hide my progress/spinner div and fade in my content div?
Jeremy Burns on 3/24/10
can u show the demo ??
- thanks =
konk on 4/21/10
ohhh, thats the demo right:)…..!
konk on 4/21/10
Hi, updating a div ‘#tablesajax’ containing only tables and navigation does refresh the whole index.ctp page in this same div? Yet it is still a XHR request as followed through firebug.
Eventhough I have followed this tutorial strictly… any idea why?
Mike on 4/25/10
What about gif loading image?
Manuel on 4/29/10
Manuel: Well in the before/after callbacks you can apply effects to a loading image instead of the content region.
Should do the trick I would think.
mark story on 5/1/10
Thanks for the answer, but I mean how to add effects to two or more elements when Ajax request is succesfull. On CakePHP 1.2 I can do stuff like this:
but how can I do this with JsHelper on 1.3?
manuel on 5/1/10
mark story on 5/2/10
How make a observerField with mootools in cakePhp 1.3?
Celso Fontes on 5/3/10
I am doing a a observerField in this way:
echo $this->Form->input(‘Vclassroom.type’,array(‘options’=>$types, ‘between’=>’: ‘));
$this->Js->get(’#VclassroomType’)->event(‘change’, $this->Js->request(’/admin/vclassrooms/type/’, array(‘update’ =>’#fooDiv’, ‘dataExpression’ => True, ‘before’ => $this->Js->get(’#loading’)->effect(‘fadeIn’, array(‘buffer’ => false)), ‘data’ => $this->Js->serializeForm(array(‘isForm’ => False, ‘inline’ => True)))));
Manuel Montoya on 5/13/10
i’ve tryed to get this ajax pagination work but not very successfully. Instead of Mootools i use Jquery as default. I baked a brandnew cake application with just one table (posts).
unfortunately i get some prototype links like Event.observe(‘link552139870’, ‘click’, function(event) […]
I even tryed to set jquery as JS Enginge but without success. var $helpers = array(‘Js’ => array(‘Jquery’));
I use the lates stable 1.3.
Does anyone has an idea?
Christian on 5/21/10
Excellent! And it actually works!
Pysiak on 8/1/10
I have followed perfectly your guide but it only works at 50%.
I just have two link for pagination: 1 & 2. If I reach page through: http://my_web.com/items/admin/page:1 link to page 2 is active, if I click this link the second page will be opened in ajax style. OK! Now, link for page 2 is disabled and link for page 1 is active, but, if I click this link the page will be reloaded entirely as normal call.
Viceversa happen if I call http://my_web.com/items/admin/page:2. Clicking on page 1 will happen in AJAX, successivly clicking on page 2 will happen with classic call.
Mariano on 8/12/10