Logo du Blog de Nukium (Samuel Sanchez)

Ressources et tutoriaux : Web 2.0 – PHP – CodeIgniter – Webdesign

Tutorial CodeIgniter : Flashdata Highlighting with jQuery and jGrowl

Tutorial CodeIgniter : Flashdata Highlighting with jQuery and jGrowl

14 déc 2009

growl icon
This tutorial explain how to create a notification system based on the jGrowl plugin for jQuery and the CodeIgniter session Flashdata.

Basically, Flashdata are sessions data only available for the next server request and are then automatically removed. This class can easily be used to build a simple notification system for your application.

Step 1: Create a Flashdata

In order to use CodeIgniter flashdata, we need to load the session library. Then, the set_flashdata method allows to set a session flashdata. This code has to be placed in your controller.

	$this->load->library('session');
	$this->session->set_flashdata('result', 'This is a custom notification using jGrowl and a Flashdata.');

Step 2: Display the Flashdata

I assume that you are using a header view file that is loaded in first everywhere in your application. Just add the code below that test if the flashdata var named result is set, then write the jQuery code that lauch the jGrowl notification.

<?php if ($this->session->flashdata('result') != ''): ?>
	<script type="text/javascript">
	<!--
	$(document).ready(function() {	
		$.jGrowl("<?php echo $this->session->flashdata('result') ?>");	
	});
	//-->				
	</script>
<?endif; ?>

Step 3: Install the jGrowl plugin for jQuery

The code above can’t work without adding the JavaScript notification files. You just have to add the jQuery library and the jGrowl plugin files into your header, don’t forget the jGrowl CSS file too. These files can be dowloaded here or on the jGrowl project home page.

Step 4: View demo!

The live demo is available on my demos space: CodeIgniter Flashdata Highlighting with jQuery and jGrowl demonstration.

13 comments

  1. Tutorial CodeIgniter : Flashdata Highlighting with jQuery and jGrowl | Nukium: http://bit.ly/fG1sTz

Similar entries

Leave a Reply

Optimized by SEO Ultimate