jquery: messaggi flash

Question

Con jQuery, come posso visualizzare un messaggio flash nella parte superiore della pagina in modo semplice? C'è qualcosa di built-in, o un plugin, o è abbastanza facile farlo da solo?

Quello che voglio dire è come dopo un post ajax di successo vorrei solo dire "hey, è andato bene" in modo non invadente.

Answer 1

avrei fatto il check out il jQuery growl style plugins available se siete alla ricerca di qualcosa di veloce da implementare :)

Il .ajaxSuccess() sarebbe un buon posto per eseguire il codice, o per errori .ajaxError(), questi sono alcuni dei global ajax event handlers available, per esempio:

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

credo che siete alla ricerca di qualcosa di simile: http://projects.zoulcreations.com/jquery/growl/

Answer 3

che non sarà la pena utilizzare un plugin in più per farlo.

Quello che facciamo, è quello di aggiungere un arco ad un contenitore predefinito o creare un div assoluto posizionato sul successo ajax e aggiungere messaggio di risposta Ajax ad esso. È inoltre possibile aggiungere un javascript autodistruttivo o un pulsante "Cancella" in quel div per rimuoverlo dal DOM. JQuery ha buone capacità di gestione DOM.

Come chiesto, qui è un esempio sporco,

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

ho usato Notify Bar per fare questo anche ... veramente semplice da usare.

Answer 5

ho solo aggiunto questo alla mia pagina, visualizza un indicatore di caricamento per ogni chiamata AJAX (non importa dove si trova sulla pagina)

/* 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(); 
    }); 
}); 

e lo stato:

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

OK, in base al tuo commento più recente, a proposito di questa opzione messaggio predefinito o complesso:

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 da 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

Nessun plug-in necessario provare quanto segue. Assomiglia molto a quello qui su StackOverflow. Si può solo passare il codice HTML per la funzione che si desidera visualizzare

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

ho finito per usare , che è davvero semplice e autonomo. E 'MIT concesso in licenza, solo un file zip con i js e file css, e si può chiamare con qualcosa di simile:

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

Anche se mi piaceva anche la soluzione da @ Brian ONeal per Notify Bar, che sembra anche molto semplice.

jquery-notice crea una casella per ogni messaggio nell'angolo in alto a destra della pagina. La barra di notifica si estrae dal bordo superiore e include alcuni stili diversi per errori, regolari o avvisi di successo.

Answer 8

Non esiste alcuna funzione incorporata per il messaggio flash in jQuery, ma è possibile utilizzare fadein() e fadeout() per il messaggio flash con l'impostazione della transizione temporale.