jquery: mensajes Flash

Question

Con jQuery, ¿cómo puedo mostrar un mensaje flash en la parte superior de la página de una manera fácil? ¿Hay algo incorporado, o un complemento, o es lo suficientemente fácil de hacerlo usted mismo?

Lo que quiero decir es como después de una exitosa publicación de Ajax Me gustaría decir "hey, it went good" de una manera no molesta.

Answer 1

Me volvería a la salida del jQuery growl style plugins available si usted está buscando algo rápido de implementar :)

El .ajaxSuccess() sería un buen lugar para ejecutar el código, ni de los errores .ajaxError(), estos son algunos de los global ajax event handlers available, por ejemplo:

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

creo que usted está buscando algo como esto: http://projects.zoulcreations.com/jquery/growl/

Answer 3

que no será digno de usar un plugin adicional para hacerlo.

Lo que hacemos, es añadir un lapso predefinido a un contenedor o crear un div posicionado absoluta en el éxito del Ajax y añadir mensaje de respuesta ajax a ella. Puede agregar un javascript autodestructivo o un botón "Borrar" en ese div para eliminarlo de DOM. JQuery tiene buenas capacidades de manejo DOM.

Como pidió, aquí es un ejemplo sucia,

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

he utilizado Notify Bar hacer esto también ... realmente sencillo de utilizar.

Answer 5

Acabo de añadir esto a mi página, muestra un indicador de carga de cada llamada AJAX (no importa dónde se encuentra en la página)

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

y el estado:

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

OK, basado en su comentario más reciente, ¿qué hay de este mensaje predeterminado de opción, o complejo:

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

Recorte de 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

No se necesita complemento, intente lo siguiente. Se parece mucho al que está aquí en stackoverflow. Usted sólo puede pasar el html en la función que desea ver

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

Terminé usando , que es realmente sencillo y autónomo. Se MIT licencia, sólo un archivo zip con los .js y .css, y se le puede llamar con algo como:

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

Aunque también me ha gustado la solución de @ Brian ONeal para Notify Bar, que también se ve muy sencillo.

jquery-notice crea un recuadro para cada mensaje en la esquina superior derecha de la página. La barra de notificación se abre desde el borde superior e incluye algunos estilos diferentes para avisos de errores, regulares o de éxito.

Answer 8

No hay ninguna función incorporada para el mensaje flash en jquery, pero puede usar fadein() y fadeout() para mensajes instantáneos con la configuración de alguna transición de tiempo.