Tutorial CodeIgniter : Flashdata Highlighting with jQuery and jGrowl

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->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.

session->flashdata('result') != ''): ?>

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 on the jGrowl project home page.

  1. Nukium says:

    Internet Explorer « Operation aborted » issue is now fixed in the demo code 😉

  2. Doud says:

    Salut Sam!! Sympa le tuto à réutiliser d’urgence!!

  3. Nukium says:

    Merci 😉

  4. conane says:

    mais comment intégret une photo dans cette flash sans utilisé de css?
    j’ai essayé avec mon code qui marche normalement sans image mais lorsque je l’introduit ca marche pas?? voila le code sans image;

    $this->session->set_flashdata(‘result’,’ ‘.$this->lang->line(‘error_pw’). »);
    redirect( »);

    code avec image:

    $this->session->set_flashdata(‘result’, ».img(‘img/icons/close_24.png’).’ ‘.$this->lang->line(‘error_pw’). »);
    redirect( »);

  5. Typo says:

    Hi and thanks for tut, but I’ve a question… how to display multiple notifications in CI?

  6. Jquery ajax tutorial says:

    I was simply trying to find this data for some time. Soon after Six hours with continual Googleing, at
    last I managed to get the idea in your website. I ponder what’s the
    Google’s challenge that will doesn’t get ranking this particular
    educational web sites far better the highest.
    Usually the leading web pages are usually stuffed with junk.
    Primarily just lately, after the brand-new panda algorithm criteria upgrade.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nos partenaires


PrestaShop nous fait confiance en nous délivrant la certification Expert qui démontre notre expertise concernant leur logiciel e-commerce. Nous avons également obtenu deux certifications officielles PrestaShop Fullstack Developer.


PayPlug est la solution de paiement française qui simplifie le paiement pour l’ensemble des TPE et PME de l'e-commerce, aussi bien en ligne qu’en magasin.


Klaviyo, leader mondial du marketing automation, propose une solution complète qui s'interface avec vos canaux de vente.