Creating Simple Ajax Pagination with CakePHP 1.3 and Mootools

Creating ajax pagination has gotten more simple and flexible for 1.3. In 1.2 you could only use the built in Ajax pagination if you were using Prototype as your javascript library. With the addition of the JsHelper you can use any Javascript library that an engine has been implemented. My example today will be using mootools. I’ll be basing this, off of a freshly baked index view using the default core templates.

Adding required helper + component

In order to easily do ajax pagination, we’re going to start off by adding:

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 options().

The evalScripts option is passed into the Request.Html options in Javascript and lets Mootools know that it should eval() any script tags it finds in the response html. At the bottom of our index.ctp, after all the paging links add:

This tell the JsHelper to write all of its buffered script elements into a script tag. When the buffer is output it is also cleared, so you don’t have to worry about outputting the same Javascript twice. You output the buffer at the bottom of the view, because when the new content is inserted into the DOM it will not have any events bound. By including the events code in the response and using 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.

The above will generate the required Javascript code to fade in and fade out the #content div before and after the content is updated. And although the helper doesn’t generate the most elegant, efficient or beautiful javascript, it gets the job done and fast. So that’s it, you can easily replace the ‘before’ and ‘after’ options with more sexy effects if you want.

Comments

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!

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?

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.

Is there any way to merge js file in javascript helper? So when I use $javascript->link(array(‘jquery’,‘default’)); the output js file would look like jquery_default.js

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?

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.

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.

Recent Artwork

Links

Mark is a designer and web-developer, working with standards compliant HTML and CSS. He has been building websites since 2000. Currently he is employed at Freshbooks as a developer, and actively contributes to open source projects specifically CakePHP. He uses this site as a place to share what he has learned and made.