Popover Notifications - best way?

[eluser]umbungo[/eluser]
I would like to implement notifications on certain events, like login, logout, account confirmed, item added to basket, that kind of thing.

EG. Currently when a user logs in they are taken back to the page they are on (but logged in). Text changes eg from Login to Logout, but I would like to add a popover notification showing an obvious 'you are logged in [ok]' message.

What is the best way to do this? I am guessing some use of jquery would probably be involved?.

[eluser]umbungo[/eluser]
Bump...

So what my guess would be is to set some flashdata value and then check for the existance of this.. and when it is found then load an extra view file which could contain a little JS/jquery that brings up a self-closing box.

or should/ can this be in a helper or something else?

Any recommendations of doing it another way? Or a point in the right direction regarding the relevant jquery (plugin?) would be much appreciated? [edit.. just a centred DIV which is then faded i guess]

[eluser]Rok Biderman[/eluser]
OK, just to intrude on this fine conversation you have with yourself The way I did it the last time was using Jquery UI. I should have been less lazy probably but anyway. This is my post function:

Code:

function update()
    {

        $this->form_validation->set_rules('some rules');
        $this->form_validation->set_rules('some more rules');
        $arg1 = $this->input->post('st');
        $arg2 = $this->input->post('elm');
        if ($this->form_validation->run() == FALSE)
        {
            echo "<p>Error";
            echo form_error('st');
            echo form_error('elm') . "</p>";
        }
        else
        {
            $this->mymodel->update_entry($arg1, $arg2);
            echo "<p>Update succesful</p>";
        }
    }

This is the JS

Code:

$(".submitbut").click(function(event) {
    event.preventDefault();
    $(this).hide();
    $(".loading").show();
        $.ajax({type: "POST",
                   url: "/admin/updte/",
                   data: { elm: $('#elm1').html(), st: str },
                           success: function(msg){
                               $(".loading").hide();
                             $( "#msg" ).html(msg).dialog({
                                            modal: true,
                                            buttons: {
                                            "OK": function() {
                                                $( this ).dialog( "close" );
                                                $(".submitbut").fadeIn("slow");
                        },
                    }
                });        
            }
         });
    });
});

This doesn't just do notification, but also posts data, hides submit button to prevent double requests, shows loading gif (.loading), validates, shows errors (if any), then updates and shows information (#msg). You don't need to use flashdata, because the modal and the text only appear after clicked. I'm not sure this is exactly what you intended and it's not the most neat thing, but it does the trick. It was written with CI 1.7.3, if you do it today, you might have to include crsf protection field into post request.

[eluser]Freeze Dried Pop[/eluser]
I extended sessions so that I could set feedback for the user, flashdata would have been fine but sometimes multiple redirects happened and I also wanted to be able to set multiple different "feedbacks".

So rather than hacking at the core functionality I added my very own basic session library like so:

Code:

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* MY_Session extends the normal session by adding a "feedback" option.
*
* The feedback option works similar to flash data but doesn't automatically delete on every page load.
*
* The idea is to easily save any user feedback such as success or error messages across pageloads automatically
* without worrying about saving it when doing redirects.
*
* Feedback data is reset everytime the get_feedback() function is called, assuming that it's only ever called
* when feedback is set to be displayed.
*/
class MY_Session extends CI_Session
{
    private $feedback_key = 'feedback';

    public function __construct($params = array())
    {
        parent::__construct($params);

        //Set feedback if it hasn't already been set (saves doing a check everytime we set or get feedback)
        if(!isset($this->userdata[$this->feedback_key])) $this->userdata[$this->feedback_key] = array();
    }

    /**
     * Add feedback messages for the next request
     *
     * @access    public
     * @param    string
     * @param    string
     * @param    string
     * @return    void
     */
    function set_feedback($type, $text, $title = '')
    {
        array_push($this->userdata[$this->feedback_key], array(
            'type'    =>    $type,
            'text'    =>    $text,
            'title'    =>    $title
        ));
    }

    /**
     * Gets the feedback ready for output
     *
     * We empty it as we assume if its being gotten, then its being displayed.
     *
     * @access    public
     * @return    array
     */
    function get_feedback()
    {
        $feedback = $this->userdata[$this->feedback_key];
        $this->empty_feedback();
        return $feedback;
    }

    /**
     * Checks if there's any feedback set
     *
     * @access    public
     * @return    bool
     */
    function feedback_exists()
    {
        return empty($this->userdata[$this->feedback_key]);
    }

    /**
     * Deletes any saved feedback
     *
     * @access    public
     * @return    void
     */
    function empty_feedback()
    {
        $this->userdata[$this->feedback_key] = array();
    }
}

Usage is pretty simple this could be your auth controller:

Code:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Auth extends CI_Controller {
/**
     * Login Page
     */
    public function login()
    {
        if(func_to_log_user_in())
        {
            $this->session->set_feedback('error', 'You have been successfully logged in', 'Login Failed');
        }
        else
        {
            $this->session->set_feedback('error', 'You could not be logged in', 'Login Failed');
        }
    }
}

Your "view" might then look something like this:

Code:

foreach($this->session->get_feedback() as $feedback) {
    echo '<div class="feedback feedback_'.$feedback['type'].'">';
        
    if(!empty($feedback['title'])) echo '<strong>'.$feedback['title'].'</strong>';
        
    echo '<p>'.$feedback['text'].'</p>
    </div>';
}

You can then style each one using ".feedback_success" or ".feedback_error" and styles for all using ".feedback".

If you want to pop up you can use jQuery to do that, or just have them display somewhere on the page. Personally I put at the very top of the page with jQuery powered close buttons on each one.

Hope this helps, i've never shared this code before so somebody else may wish to recommend improvements!