Sugerencias

Mostrar flashes en rails con jquery

Publicado el 20 Mar 2010

Hablo de
rails, jquery, y cache

En entornos con una política de cache fuerte, puede ser un problema mostrar los típicos mensajes de flash para dar feedback al usuario después de haber realizado algún tipo de acción. Digo que puede ser un problema, porque puede ocurrir que nuestro sistema de cache (de página, fragmentos, etc) guarde la versión con el mensaje de flash y todos los usuarios verán esa versión.

Hay muchas maneras de evitar éste comportamiento, pero la última que he usado, es mostrar el mensaje de flash por javascript, una vez que la pagina ha cargado, con lo que nuestro sistema de cache nunca guardara la versión con el mensaje de flash.

Para hacerlo, primero debemos establecer una cookie en nuestro controlador, con el mensaje de flash en cuestión, en vez de asignarselo directamente al famoso flash[:notice] o flash[:error].

success.html do
   cookies.delete 'flash_notice' if !cookies['flash_notice'].blank?
   cookies['flash_notice'] = { :value => "Hemos recibido tu mensaje :) "} 
   redirect_to "new"
 end

Con esto, primero vacíamos la cookie en cuestión, por si acaso tiene algún contenido y después guardamos nuestro mensaje en ella.

Luego solo nos queda mostrar nuestro mensaje de flash por javascript:

var myapp = {
    
    load_flashes: function(notice_cookie,error_cookie){
            notice = (($.cookie(notice_cookie) || '').replace(/\+/g, ' '));   
            error = (($.cookie(error_cookie) || '').replace(/\+/g, ' '));   
            
           if(notice != '') {
                type = 'noticeExplanation';
                content = notice;
                $.cookie(notice_cookie, null);
            }else if (error != ''){
             type = 'errorExplanation';
                content = error;
                $.cookie(error_cookie, null);
            }else{
                type= '';
            };
            if (type != ''){
                $("#flmessages").addClass("flashmsg");
                $("#flmessages").addClass(type);
                $("#flmessages").html(content);
            };
      return false;
    },
    
}

Suponiendo que nuestro mensaje de flash lo vamos a mostrar en un div con id flmessages, lo que hacemos es dependiendo de que tipo de mensaje flash tengamos que mostrar, le añadimos la clase noticeExplanation o errorExplanation y el contenido de nuestra cookie a ese contenedor (ademas de la clase genérica flashmsg). Ademas también vaciamos la cookie que hemos leído para mostrar el mensaje.

Sólo nos quedaría cargar éste javascript en el document.ready de nuestra aplicación:

 $(document).ready(function() {
    myapp.load_flashes('flash_notice','flash_error');
 });

Deja tu comentario: