Jordan Boesch has an excellent jQuery plugin for showing Growl-like messages in your web applications. This immediately seemed perfect for showing the flash messages on my CakePHP application, and Jordan even links to a blog post explaining how to integrate these together.
This post is in Spanish, and even though it’s easy enough to follow, I thought I’d sum it up for the English-speaking crowd as well.
Set Gritter up with CakePHP
- Download Gritter
- Download jQuery
- Add the *.js files you downloaded to your webroot js folder (/app/webroot/js)
- Add gritter’s css and images to the correct place in your file structure. For example – to your /app/webroot/css and app/webroot/img folders.
Configure your cake’s page template
(This is usually /app/views/layouts/default.ctp)
Load Gritter and jQuery javascript files, and Gritter’s css file. (The code below assumes you put the css file in /app/webroot/css).
<head>
...
<script type="text/javascript" src="<?php echo Dispatcher::baseUrl(); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo Dispatcher::baseUrl(); ?>/js/jquery.gritter.min.js"></script>
...
<link rel="stylesheet" href="<?php echo $baseurl; ?>css/jquery.gritter.css" type="text/css" media="screen" />
...
</head>
...
<script type="text/javascript" src="<?php echo Dispatcher::baseUrl(); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo Dispatcher::baseUrl(); ?>/js/jquery.gritter.min.js"></script>
...
<link rel="stylesheet" href="<?php echo $baseurl; ?>css/jquery.gritter.css" type="text/css" media="screen" />
...
</head>
You will use the template to display the flash message. This is cool, because then all you need to worry about is setting the flash message in your controllers – and never worry about it in your individual views. The way the code below works is that if there’s no flash message – nothing will be displayed.
<?php
$session->flash();
//The line below is your regular Cake's displaying of the view.
echo $content_for_layout;
?>
$session->flash();
//The line below is your regular Cake's displaying of the view.
echo $content_for_layout;
?>
I usually use absolute positioning (Gritter’s default) for Gritter’s message. If you do so as well – it doesn’t really matter where you put the $session->flash() line inside your template.
Create layouts for the flash messages
The real trick (and gem) in underave’s post is using specific layouts for the flash messages. It’s quite simple, really. Suppose you have two types of messages you need to display to your users: an informational message (e.g. ‘New photo added’) and an error message (e.g. ‘Wrong user/password combination’).
Suppose these two types are different – they show a different message icon. While it is easy enough to do this with code – it is even easier to create two different layouts for the flash messages.
Under /app/views/layouts/ create two new files: flash_normal.ctp and flash_error.ctp.
//flash_normal.ctp
<script type="text/javascript">
$(function(){
$.gritter.add({
title: "Info",
text: "<?php echo $content_for_layout;?>",
image: "<?php echo Dispatcher::baseUrl();?>/img/info.png" // See IE7 note below
//sticky: true
});
});
</script>
<script type="text/javascript">
$(function(){
$.gritter.add({
title: "Info",
text: "<?php echo $content_for_layout;?>",
image: "<?php echo Dispatcher::baseUrl();?>/img/info.png" // See IE7 note below
//sticky: true
});
});
</script>
//flash_error.ctp
<script type="text/javascript">
$(function(){
$.gritter.add({
title: "Error",
text: "<?php echo $content_for_layout;?>",
image: "<?php echo Dispatcher::baseUrl();?>/img/error.png" // See IE7 note below
//sticky: true
});
});
</script>
<script type="text/javascript">
$(function(){
$.gritter.add({
title: "Error",
text: "<?php echo $content_for_layout;?>",
image: "<?php echo Dispatcher::baseUrl();?>/img/error.png" // See IE7 note below
//sticky: true
});
});
</script>
The code above applies Gritter’s functions to $content_for_layout. The $content_for_layout is actually the flash message you write in your controller.
(Of course, you may add as many as you want, and play with Gritter’s options to suit your needs. (E.g. uncomment the sticky:true option, to ensure the message remains on the screen).
All that’s left is hooking up the flash layout templates and the flash messages themselves. This is perfomed in your controllers, where you set the flash messages to display. For example:
//The silly code below tests whether the user calculated 2+2 correctly.
if ($userAnswer == 4) {
$this->Session->setFlash('You are right! You deserve a golden trophy.','flash_normal');
} else {
$this->Session->setFlash('No. Sorry.','flash_error');
}
if ($userAnswer == 4) {
$this->Session->setFlash('You are right! You deserve a golden trophy.','flash_normal');
} else {
$this->Session->setFlash('No. Sorry.','flash_error');
}
That’s really all there is to it – all the rest is playing around with Gritter’s options.
Important note for IE7:
In flash_error.ctp and flash_regular.ctp, do not leave a trailing comma at the end of gritter’s configuration. While this is perfectly legal and works like a charm with FF and Chrome – IE will fail the entire charade, and you’ll never see your flash message on the screen.
I believe the same will happen with IE6. In IE8 it’s all good!
Popularity: 26% [?]
5 Responses to Use Gritter for Jquery (Growl) for flash in CakePHP
Leave a Reply
Recent Comments
- Medovarszki: This post saved my hair from falling out but yeah, I beat my head against the wall now too
- Shehryar: Probably the ebst spring web mvc tutorial I have read, explain everything in great detail. i loved it, this...
- armand: You do not resize the image. You just display it smaller using html tag attributes. It would be nice to...
- COTP: ** Just to clarify, in CakeErrorController.php (the copy in app/Controller/) public function beforeRender() {...
- COTP: For CakePHP 2.0+, you can copy lib/Cake/Controller/CakeErrorC ontroller.php to app/Controller/CakeErrorCon...
- Medovarszki: This post saved my hair from falling out but yeah, I beat my head against the wall now too
great post as usual!
This is really great! I wonder what the code would look like to integrate this into a RoR application as compared to PHP ?
@Jeremy: I don’t have much RoR experience, but I know that the error_messages_for method returns a div element.
In your erb file, add:
$(document).ready(function() {
$("#the-div-id").gritter.add({
title: "Error",
text: ... ,
image: ...
//sticky: true
});
});
</script>
replacing #the-div-id with the div id that error_messages_for creates.
Make sure you include the correct jQuery files.
Good luck
Hello from Vyatka River!!! Thank you for information! It?s a good idea for next full revision…
))
Write more!!!
FYI, using the html helper for loading gritter…
echo $this->Html->css(array(‘jquery.gritter’ ));
echo $this->Html->script(array(‘jquery-1.6.3.min’,'jquery.gritter.min’));