jquery: Messages flash

Question

Avec jQuery, comment afficher facilement un message flash en haut de la page? Y at-il quelque chose de intégré, ou un plugin, ou est-ce assez facile de le faire vous-même? Ce que je veux dire, c'est comme après un post ajax réussi, je voudrais juste dire "hé, ça s'est bien passé" d'une manière non-intrusive.

Answer 1

Je vérifierais la jQuery growl style plugins available si vous cherchez quelque chose de rapide à mettre en œuvre :)

Le .ajaxSuccess() serait un bon endroit pour exécuter votre code, ou pour des erreurs .ajaxError(), ce sont quelques-unes des global ajax event handlers available, par exemple:

$(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 2

Je crois que vous cherchez quelque chose comme ceci: http://projects.zoulcreations.com/jquery/growl/

Answer 3

il être intéressant d'utiliser un plugin supplémentaire habitude de le faire.

Ce que nous faisons, est à ajouter une durée à un conteneur prédéfini ou créer un div positionné absolu sur ajax succès et ajouter un message de réponse ajax à lui. Vous pouvez en outre ajouter un javascript autodestructeur ou un bouton "Effacer" dans ce div pour le retirer de DOM. JQuery a de bonnes capacités de gestion DOM.

Comme demandé, voici un exemple sale,

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 4

Je l'ai utilisé Notify Bar de le faire aussi ... vraiment simple à utiliser.

Answer 5

Je viens ajouté à 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 le statut:

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

OK, basé sur votre commentaire le plus récent, que diriez-vous de cette option message par défaut, 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 from jquer y ajax:

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

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

Answer 6

Aucun plugin requis essayez ce qui suit. Cela ressemble beaucoup à celui ici sur stackoverflow. Vous pouvez tout simplement passer le html à la fonction que vous voulez 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') }); 
}, 

Answer 7

Je fini par utiliser , qui est vraiment simple et autonome. Il est MIT sous licence, juste un fichier zip avec les fichiers .js et .css, 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'aimais aussi la solution de ONeal pour Notify Bar @ Brian, qui semble également très simple.Jquery-notice crée une boîte pour chaque message dans le coin supérieur droit de la page. La barre de notification descend du bord supérieur et inclut quelques styles différents pour les erreurs, les avis réguliers ou les avis de réussite.

Answer 8

Il n'y a pas de fonction intégrée pour le message flash dans jquery mais vous pouvez utiliser fadein() et fadeout() pour un message flash avec réglage de la transition temporelle.