In this post I will be outlining a simple way to display then hide flash messages in CakePHP 1.3 using my favourite javascript framework jQuery.

Firstly I modify CakePHP’s Session helper so that I can get the layout I want for the php genereated flash messages. Create the file conduct_session.php in the /app/views/helpers directory of your Cake application and paste the following code into it.

[php]
class ConductSessionHelper extends SessionHelper {
function flash($key = ‘flash’) {
$out = false;
if($this->__active === true && $this->__start()) {
if(parent::check(‘Message.’ . $key)) {
$flash = parent::read(‘Message.’ . $key);
if(!empty($flash['element'])) {
if($flash['element'] == ‘default’)
if($key == ‘auth’) $class = ‘error’;
else $class = ‘info’;
else $class = $flash['element'];
} else {
if($key == ‘auth’) $class = ‘error’;
else $class = ‘info’;
}
$out = ‘

‘ . $flash['message'] . ‘

‘;

parent::delete(‘Message.’ . $key);
}
}
return $out;
}
}
[/php]

Inside app_controller.php make sure you include the ConductSession helper.

I like to have a main file for the site that contains an object with regularly used javascript functions.

[javascript]
var base = {
flash : function() {
var messages = $(‘div#messages’);
var timer;
var theClass;
if(arguments.length > 1) theClass = arguments[1];
else theClass = ‘info’;
if(arguments.length > 0) {
messages.hide()
messages.prepend(‘

‘ + arguments[0] + ‘

‘);
messages.fadeIn(200);
}
timer = setTimeout(function() {
messages.slideUp(500, function() { messages.find(‘p’).remove(); });
}, 8000); // You can modify this to display the message for different times

// Make the messages container clickable to hide the message before the timeout fires
messages.click(function() {
clearTimeout(timer);
messages.slideUp(500, function() { messages.find(‘p’).remove(); });
});
}
};
[/javascript]

Adding the following snippet will, if there is a Cake flash message to display, automatically hide it after a specific amount of time. It is also easy to modify the flash function so that messages container starts off hidden and then fades in if there is a message (for this example it will only do this for javascript generated messages).

[javascript]
$(function() {
if($(‘div#messages’).children().length > 0) { base.flash(); }
}
[/javascript]

Then in my CakePHP template files I include this file along with the rest of my css and jQuery. Somewhere in my templates or views I need to include the following snippet so that Cake can display it’s flash messages.

[php]

[/php]

You can style the div container and the messages themselves in a number of ways to achieve a notification that is fixed to the top of the screen, displayed in line below the header, or perhaps floating near the top left corner of the window. You can use the class to specify an icon and colour too.

From within your controllers you can now create session messages in much the same way now with the ability to easily add a class. In the example below we are setting a flash message as normal but with a class info attached as well.

[php]
$this->Session->setFlash(‘Welcome to my new and improved flash messages’, ‘info’);
[/php]

Will result in the following markup.

[html]

[/html]

Another benefit is that we get javascript generated notifications using the same javascript function.

[javascript]
base.flash(‘Welcome to my new and improved flash messages’, ‘info’);
[/javascript]

Will result in exactly the same markup as with the php generated flash messages.

Hope you find it useful