files - jquery download file from server ajax

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 integrado, o un complemento, o es lo suficientemente fácil como para hacerlo usted mismo?

Lo que quiero decir es que después de una publicación de ajax exitosa me gustaría decir simplemente "hey, salió bien" de una manera no intrusiva.

Answer 1

Acabo de agregar esto a mi página, muestra un indicador de carga para cada llamada ajax (no importa dónde esté 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>

De acuerdo, según su comentario más reciente, ¿qué le parece 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 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);
    }

Answer 2

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

Answer 3

He usado Notify Bar para hacer esto también ... Realmente fácil de usar.

Answer 4

Me gustaría ver los complementos de estilo de jQuery growl disponibles si está buscando algo rápido de implementar :)

.ajaxSuccess() sería un buen lugar para ejecutar su código, o para errores .ajaxError() , estos son algunos de los controladores de eventos ajax globales disponibles , 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 5

No hay ninguna función integrada para mensajes flash en jQuery, pero puede usar fadein() y fadeout() para mensajes flash con configuración de transición temporal.

Answer 6

No se necesita ningún plugin, intente lo siguiente. Se parece mucho al de aquí en . Simplemente puede pasar el código HTML a 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

No valdrá la pena usar un complemento adicional para hacerlo.

Lo que hacemos es agregar un intervalo a un contenedor predefinido o crear un div posicionado absoluto en el éxito ajax y agregarle un mensaje de respuesta ajax. También puedes agregar un javascript autodestructivo o un botón "Borrar" en esa división para eliminarlo de DOM. JQuery tiene buenas capacidades de manejo de DOM.

Como se le preguntó, aquí hay un ejemplo sucio,

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 8

Terminé usando jquery-notice , que es realmente simple y autónomo. Tiene licencia MIT, solo un archivo zip con los archivos .js y .css, y puedes llamarlo con algo como:

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

Aunque también me gustó la solución de @Brian ONeal para Notify Bar , que también parece muy simple.

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