Planet CakePHP

Today I needed ajax-ified pagination in a cakePHP app, and after looking around a bit, I found an excellent start on this blog: http://lucidchart.blogspot.com/2008/10/jquery-ajax-pagination-for-cakephp-12.html. In this post, I add the ability to show and hide a div to provide user feedback during an Ajax action using Jquery.

Simply put the SetupAJAXPagination() function somewhere, and call $(function(){SetupAJAXPagination(‘CssID’);}); in jquery’s $(document).ready() function, and you immediately have ajax-ified pagination using cakePHP’s pagination features.
The only thing else that you may want is to setup some user feedback through some sort of animated GIF (a spinner), or some text telling the user that this section is reloading data from the database, and to be patient.
To do this, all you need is JQuery’s .ajaxStart and .ajaxStop methods:
just create a div with the image/text that you want to show while the user “waits”, something like:
  <div id="loading">bla bla bla</div>
And then in JQuery’s $(document).ready() function, add:
$('#loading').hide().ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
And that is pretty much it. The only thing else that I found today was a nifty little site to generate those animated gifs (spinning/twisting/progress bars) that we all search for. You can choose the colors you want, and can easily sample and download the animated gif that is created for you:
http://www.ajaxload.info/