Here I will describe how I did an Ajaxed pagination for one of my projects using jQuery and Livequery Plugin. Currently I am working on a huge project which, hopefully, will feed me with some ideas for blog posts and this is one of them 
. So:
1. Loading the javascript libs
Loading the jQuery and Livequery was done by Autoloader helper, but if you don’t use it just include jQuery and Livequery in your layout with following code
echo $javascript->link('jquery.min');
echo $javascript->link('plugins/jquery.livequery');
?>
2. Javascript which handles ajax requests
I would suggest to create separate file about this, but you could insert that code in your layout file. Depends from your coding style. So, the snippet:
$('#content').load($(this).attr('href'));
return false;
});
Other important things
Add component RequestHandler, which will detect what is the request type to the controller and automatically change the layout to Ajax. Otherwise you need to change this manually.
Change #content with id of the element which holds the CakePHP content in your design. This is the default #id, so if you are using default layout, don’t touch it.
What does this script?
The script replaces the standard click event to all links which are used for pagination and sort. Livequery plugin re-bind this after the ajax request.
The good thing is that even if the JavaScript is disabled in the users browser, the sort and pagination functionality will be operational.
The idea for this approach was taken from LucidChart blog. So thanks for the idea!
Loading ...
Couldn’t you use jQuery.live() with jQuery 1.3? It does a very similar thing and removes one additional js file.
Mark, I didn’t knew about jQuery.live(), but I will definitely try! Thanks!
That looks great, basically I will use my normal pagination and livequery plug-in will paginate it with AJAX queries if user has javascript enabled. Will have to find out about jQuery.live as well
Jeet, jQuery.live doing very good job too, I’ve checked already – so, go ahead with it
Hey Nik, That was really helpfull info, But Haven’t you tried Rails ?
As for the 2.0 version of Rails, the pagination features have been moved from Rails core into a plugin called classic pagination. Unfortunately many people prefer to use another plugin called will_paginate, but I didn’t manage to work with this plugin. So we have to install the classic pagination plugin with the following command :
/*$ ruby script/plugin install svn://errtheblog.com/svn/plugins/classic_pagination*/
Also, Grid with HTML is nice feature, if you add em up
I’m trying to use jquery live for what you have described – but I’m having some problems.
As a test I’ve added the following to make jquery ignore all in the page:
$(“a”).live(“click”, function() { return false; })
I works fine for this:
google
but for this it doesn’t work:
2
As the skilled cakephp’ian can tell this originates from :
echo $paginator->numbers(array(’separator’=>’ – ‘));
I have narrowed the problem down to the colon between ‘page’ and ‘2′
How can I avoid this ? I have tried with what is suggested here -> ‘a[href*=/page:]‘ – doesn’t help though
sorry some of the code was intepreted – I’ll try again:
I’m trying to use jquery live for what you have described – but I’m having some problems.
As a test I’ve added the following to make jquery ignore all in the page:
// $(“a”).live(“click”, function() { return false; }) //
I works fine for this:
// google //
but for this it doesn’t work:
// 2 //
As the skilled cakephp’ian can tell this originates from :
// echo $paginator->numbers(array(’separator’=>’ – ‘)); //
I have narrowed the problem down to the colon between ‘page’ and ‘2′
How can I avoid this ? I have tried with what is suggested here -> ‘a[href*=/page:]‘ – doesn’t help though
Martin,
I’ve got your question. The suggested code (in the post) is working properly in my recent project without any problems. Why do you need to make such things like
The idea of this snippet is to transfer a.click event to a.ajax event and it’s restricted only to links containing page and sort parameters. Your code $(“a”) will stop clicks to all links in the site/application.
If you want I can provide an example, but basically there aren’t any changes in the php part of the code.
I am using live too in my project, as suggested from Mark.
Could you clarify why you want to modify pagination links?
Great, Nik! Just what I was looking for.
Very nice article Nic, together with http://www.cake-toppings.com/2009/11/16/ajax-pagination-with-jquery-and-elements/comment-page-1/#comment-5915 you saved my day!
awesome, solved the last piece of my problem