jquery: messages Flash

j'ai utilisé Notification Bar le faire aussi... Vraiment simple à utiliser.

Aucun plugin nécessaire, essayez les solutions suivantes. Ça ressemble beaucoup à celui de stackoverflow. Vous pouvez simplement passer le html à la fonction que vous souhaitez voir

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

il ne sera pas utile d'utiliser un plugin supplémentaire pour le faire.

Ce que nous faisons, c'est d' ajouter une portée à un conteneur prédéfini ou créer un absolu placé div en ajax succès et ajouter ajax message de réponse. Vous pouvez en outre ajouter un javascript autodestructeur ou un bouton" Effacer " dans cette div pour le supprimer de DOM. JQuery a de bonnes capacités de manipulation DOM.

Comme demandé, voici un sale exemple,

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

je viens d'ajouter à ma page, affiche un indicateur de chargement pour chaque appel ajax (peu importe où il se trouve sur la 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();
    });
});

Et l'état:

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

OK, basé sur votre commentaire le plus récent, que diriez-vous de cette option par défaut message, ou complexe:

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

je crois que vous êtes à la recherche de quelque chose comme ceci: http://projects.zoulcreations.com/jquery/growl/

j'ai fini par utiliser jquery-avis, qui est vraiment simple et autonome. C'est une licence du MIT, juste un fichier zip avec le .js et .css fichiers, et vous pouvez l'appeler avec quelque chose comme:

<script type="text/javascript">
  $(document).ready( function () {
    jQuery.noticeAdd({
        text: '${flash_get()}',
        stay: true
        });
    return false;
    });
</script>

bien que j'ai aussi aimé la solution de @Brian ONeal pour Informer Bar, qui semble également très simple.

jquery-avis fait une boîte pour chaque message sur le coin supérieur droit de la page. Notification barre tire vers le bas à partir du bord supérieur, et comprend quelques styles différents pour les erreurs, les avis réguliers ou les avis de succès.

il n'y a pas de fonction intégrée pour les messages flash dans jquery mais vous pouvez utiliser fadein() et fadeout() pour les messages flash avec mise en place d'une transition temporelle.