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

<div id="message_container" style="display:none">
  <span id="msg"></span>
  <a id="clear_ack" href="#" 
    onclick="$(this).parents('div#message_container').fadeOut(400); return false;">
    clear
  </a>
</div>

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)
              }
           }
       });
};

Answer 2

No plugin needed try the following out. It looks a lot like the one here on stackoverflow. You can just pass the html to the function that you want to see

    showFlash: function (message) {
    jQuery('body').prepend('<div id="flash" style="display:none"></div>');
    jQuery('#flash').html(message);
    jQuery('#flash').toggleClass('cssClassHere');
    jQuery('#flash').slideDown('slow');
    jQuery('#flash').click(function () { $('#flash').toggle('highlight') });
},

Answer 3

There is not any built-in function for flash message in jquery but you can use fadein() and fadeout() for flash message with setting some time transition.

Answer 4

I would check out the jQuery growl style plugins available if you're looking for something quick to implement :)

The .ajaxSuccess() would be a good place to run your code, or for errors .ajaxError(), these are some of the global ajax event handlers available, for example:

$(document).ajaxSuccess(function() {
  //fire success message using the plugin of choice, for example using gritter:
  $.gritter.add({ 
    title: 'Save Complete!',
    text: 'Your request completed successfully.'
  });
});

Answer 5

I have used Notify Bar to do this also... Really simple to use.

Answer 6

I just added this to my page, displays a loading indicator for each ajax call (no matter where it is on the page)

/* Ajax methods */
/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for page...';
$(function()
{
    $("#AjaxStatus")
    .bind("ajaxSend", function()
    {
        $(this).text(loadingMessage);
        $(this).show();
    })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

And the status:

<span id="AjaxStatus" class="ui-state-error-text"></span>

OK, based on your most recent comment, how about this option default message, or complex:

ShowStatus(true, 'Save Failed with unknown Error', 4000);

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

Snip from jquery ajax:

   success: function(msg)
    {
        ShowStatus(true, 'Hey it went well', 4000);
        Process(msg);
    },

  failure: function(msg)
    {
        ShowStatus(true, 'Save Failed with unknown Error', 4000);
    }