jquery: Flash messages

Question

With jQuery, how can I display a flash message at the top of the page in an easy way? Is there something built-in, or a plugin, or is it easy enough to do it yourself?

W

Answer 1

It wont be worth using an extra plugin to do it.

What we do, is to add a span to a predefined container or create an absolute positioned div on ajax success and add ajax response message to it. You can further add a self destructive javascript or a "Clear" button in that div to remove it from DOM. JQuery has got good DOM handling capabilities.

As asked, here is one dirty example,

HTML

  
  
    clear
  

JS

var set_message = function(message){
     var container = $('#msg_container');
     $(container).find('span#msg').html(message);
     $(container).show();
}

var set_counter = function(){
    $.ajax({
           type: "POST",
           url: '/some/url/',
           dataType: 'json',
           error: function(response){},
           success: function(response){
              if (responses.message){
                  set_message(responses.message)
              }
           }
       });
};