Función para mostrar alertas / notificaciones con JQUERY

neodani · #1 (**permalink**) 01/05/2010, 05:31

Buenas,

Estoy intentando mostrar alertas personalizadas según se pulse un botón y no consigo que funcione, podríais echarme una mano?

El código es el siguiente, lo ideal sería poder crear una función en la que yo le diria pasar el mensaje que quisiera así como el estilo del mensaje, Ej.

function notificacion (msg, estilo){} y que al pulsar sobre cada botón cogiese el mensaje correcto que tiene que mostrar. Se puede hacer?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Mostrar notificacion al pulsar botón</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $("button").click(function () {
        $change="<div class='notificacion'> Has recibido nuevo mensaje!</div>";
        setTimeout(function(){
            $(".notificacion").fadeOut("slow", function () {
            $(".notificacion").remove();
        });
        }, 4000);
 
    });
});
</script>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i {
    margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;vertical-align: baseline
}
body {color: #000000;background-color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;}
.cabecera{height:200px;width:100%;background:yellow;}
.notificacion{
    width:100%;
    margin:0px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: #50EF3E;
    color:white;
    font-weight:bold;
    font-size:14px;
    text-align:center;
    top:0px;
    position:fixed;
}
</style>
 
</head><body>
<?php echo $change; ?>
<div class="cabecera">
    <p> esta es la cabecera </p>
</div>
<button>Recibir mensaje</button>
<button>Enviar mensaje</button>
<button>Eliminar mensaje</button>
 
<div id="container" >
    <p>MOSTRANDO NOTIFICACIONES....</p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><p>test</p>
</body>
</html>

Muchas gracias de antemano!

mayid · #2 (**permalink**) 01/05/2010, 08:49

En document.ready tenes una variable $change no declarada. Que por otro lado no se entiende si es de php o de jquery.

Probaste un prefabricado?:
http://www.anieto2k.com/2008/12/31/j...mpt-y-confirm/
http://abeautifulsite.net/2008/12/jquery-alert-dialogs/

Hay varios. A mi me gusta en particular el jGrowl.

neodani · #3 (**permalink**) 01/05/2010, 10:21

Cita:

Iniciado por mayid

En document.ready tenes una variable $change no declarada. Que por otro lado no se entiende si es de php o de jquery.

Probaste un prefabricado?:
http://www.anieto2k.com/2008/12/31/j...mpt-y-confirm/
http://abeautifulsite.net/2008/12/jquery-alert-dialogs/

Hay varios. A mi me gusta en particular el jGrowl.

Estoy siguiendo tu consejo

y estoy utilizando el plugin de jquery.jgrowl

Tengo un par de dudas:
No consigo alinear cada mensaje de una manera diferente. Con el theme consigo cambiarle los colores al mensaje y diferenciarlos, eso correcto. Pero lo que quiero es por ejemplo uno aparezca centrado y el otro a la derecha de la pantalla.

He probado con position pero no me hace nada, la única forma que he logrado que funcione es poniendo $.jGrowl.defaults.position = 'center'; al comienzo, pero me lo aplica a todos los mensajes...

También me gustaría saber si se puede quitar el "close all" que aparece cuando muestras varios mensajes a la vez.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mensaje superior</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
 
<script type="text/javascript">
 
$(document).ready(function() {
    //$.jGrowl.defaults.position = 'center';
    $.jGrowl("Has recibido un nuevo mensaje de Darucilla!", {position:'center',theme:'verde'});
    $.jGrowl("Mensaje eliminado!", {position:'bottom-left',theme:'rojo'});
});;
 
</script>
<style type="text/css">
div.jGrowl div.verde {
    background-color:       #77EF6A;
    color:                  #000;
}
div.jGrowl div.rojo {
    background-color:       #EF6A77;
    color:                  #000;
}
 
body > div.jGrowl.center {
    top:                0px;
    left:               10%;
}
</style>
</head>
<body>
 
</body>
</html>

Muchas gracias de antemano!

mayid · #4 (**permalink**) 01/05/2010, 11:19

Podes usar la propiedad position para ubicar cada mensaje en lugares diferentes. Lee la API!

Cita:

$.jGrowl("Stick this!", {
sticky: true,
position: top-right });

Todo lo que vaya entre llaves en una opcion de lanzamiento.

Para evitar el close all usa:

closer: false

neodani · #5 (**permalink**) 01/05/2010, 13:46

Cita:

Iniciado por mayid

Podes usar la propiedad position para ubicar cada mensaje en lugares diferentes. Lee la API!

Todo lo que vaya entre llaves en una opcion de lanzamiento.

Para evitar el close all usa:

closer: false

Hola mayid,

Para que el mensaje se aguante fijo sin que desaparezca con el sticky lo consigo.

Sin embargo, hay dos propiedades que no consigo que funcionen si las especifico dentro de las propiedades del mensaje

Son el closer y el position

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mensaje superior</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
 
<script type="text/javascript">
 
$(document).ready(function() {
    //$.jGrowl.defaults.position = 'center';
    //$.jGrowl.defaults.closer=false;
    $.jGrowl("Stick this!", {closer: false, sticky: true, theme:'rojo', position: 'bottom-left' });
    $.jGrowl("wwwww!", {closer: false, sticky: true, theme:'verde', position: 'top-right' });
});
 
</script>
<style type="text/css">
div.jGrowl div.verde {
    background-color: #77EF6A;
    color: #000;
    width:  100px;
    height:20px;
}
div.jGrowl div.rojo {
    background-color: #EF6A77;
    color: #000;
    width:  300px;
    height:20px;
}
 
body > div.jGrowl.center {
    top:                0px;
    left:               10%;
}
 
body > div.jGrowl.bottom-left {
    left:               0px;
    bottom:             0px;
}
 
body > div.jGrowl.top-right {
    right:              0px;
    top:                0px;
}
 
</style>
</head>
<body>
 
</body>
</html>

Para que funcione el closer y el position tengo que ponerlo fuera del mensaje, extraño no?

Y claro si los pongo fuera afecta a todos los mensajes que aparezcan (y no es lo adecuado). ¿Puedes echarme una mano?

$(document).ready(function() {
$.jGrowl.defaults.position = 'center';
$.jGrowl.defaults.closer=false;

$.jGrowl("Stick this!", {sticky: true, theme:'rojo', position: 'bottom-left' });
$.jGrowl("wwwww!", {sticky: true, theme:'verde', position: 'top-right' });
});

Muchas gracias de antemano!

neodani · #6 (**permalink**) 01/05/2010, 14:07

Lo conseguí asignándole una id para cada mensaje

Código completo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mensaje superior</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
 
<script type="text/javascript">
 
$(document).ready(function() {
    $('#notificacion').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
    sticky: false,
    theme: 'verde',
    closer: false
    });
    $('#notificacion2').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
    sticky: true,
    theme: 'rojo',
    closer: false
    });
 
});
 
</script>
<style type="text/css">
div.jGrowl div.verde {
    background-color: #77EF6A;
    color: #000;
    width:  800px;
    height:20px;
}
div.jGrowl div.rojo {
    background-color: #EF6A77;
    color: #000;
    width:  300px;
    height:20px;
}
 
body > div.jGrowl.top-center {
    top:                0px;
    left:               10%;
}
 
body > div.jGrowl.bottom-left {
    left:               0px;
    bottom:             0px;
}
 
body > div.jGrowl.top-right {
    right:              0px;
    top:                0px;
}
 
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaa</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>bbbbbbbbbbbbbbbbbbbb</p><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="notificacion" class="top-center"></div>
<div id="notificacion2"></div>
</body>
</html>

Lo guay ahora sería que el mensaje lo cogiese dinámicamente, es decir, que continuamente (ej. cada 5 min.) estuviese preguntando a una página si hay nuevas notificaciones y si hubiese alguna la mostrase, esto se puede hacer? es algo común para saber si te llega algun mensaje de un usuario mientras estas visitando la página web no?

Muchas gracias!

mayid · #7 (**permalink**) 01/05/2010, 15:44

Poco mas queres hacer un chat, no? Jaja!

Cita:

Lo conseguí asignándole una id para cada mensaje

ASi es como lo uso yo tambien. Y a cada nuevo mensaje le doy las especificaciones que necesite.

neodani · #8 (**permalink**) 01/05/2010, 16:56

Cita:

Iniciado por mayid

Poco mas queres hacer un chat, no? Jaja!

Jejeje no es mi intención, sino mostrar un aviso en la parte superior de la web con distintas notificaciones, desde mensajes del administrador, alguna noticia, etc...

Te pongo un ejemplo, dime si lo consideras suficientemente real para llevarlo a cabo o se me va la pinza :D

Estas visitando la web en la que tienes un apartado de la web que te dice 0 mensajes. De repente otro usuario contacta contigo rellena un formulario y te envia un mensaje. Tu que estas navegando por la vez, te debería llegar un mensaje (aqui es donde entra el jGrowl y te dice que "Has recibido un nuevo mensaje del usuario XXX" en ese instante el apartado que te decía que tenías 0 mensajes cambia a 1.

¿Cómo se implementaría tal función?

Muchas gracias de antemano compis

mayid · #9 (**permalink**) 01/05/2010, 19:19

Necesitas setInteval()

No creo que eso se justifique a menos que la web sea mutitudinaria y la gente muy social.

Pienso que es más facil ir pagina por pagina, y que al recargar, naturalmente, se comprube si hay mensajes nuevos. Y ahi aparezca jgrowl si te parece.

neodani · #10 (**permalink**) 02/05/2010, 02:53

Cita:

Iniciado por mayid

Necesitas setInteval()

No creo que eso se justifique a menos que la web sea mutitudinaria y la gente muy social.

Pienso que es más facil ir pagina por pagina, y que al recargar, naturalmente, se comprube si hay mensajes nuevos. Y ahi aparezca jgrowl si te parece.

Esa era el plan B, mejor así no? consumes menos recursos :)

Me aparece la duda de como hacer dos funciones, por ejemplo. Tienes dos tipos de mensajes uno con fondo verde y otro fondo rojo.

Cómo haces para meterlos en una sola función tipo

mostrar_notificacion(id,msg,theme) {}

Ej.
id = #notificacion
msg = "Tienes un mensaje nuevo"
theme = verde

De forma que le pases el mensaje y el theme que quieres utilizar si rojo o verde? y esas variables id, msg y theme son realmente variables que le llegan de php.

Alguna idea para tirar hacia delante?

Código Javascript:

Ver original$(document).ready(function() {
    $('#notificacion').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
    sticky: true,
    theme: 'verde',
    closer: false
    });
    $('#notificacion2').jGrowl("Mensaje al final de la página", { 
    sticky: true,
    theme: 'rojo',
    //position: 'bottom-left',
    closer: false
    });
});

Muchas gracias de antemano!

mayid · #11 (**permalink**) 02/05/2010, 10:27

Si queres traer variables desde PHP, tenes que usar jSon.

http://api.jquery.com/jQuery.getJSON/

De otra manera, lo que recibirías sería texto plano.

neodani · #12 (**permalink**) 02/05/2010, 14:17

Cita:

Iniciado por mayid

Si queres traer variables desde PHP, tenes que usar jSon.

http://api.jquery.com/jQuery.getJSON/

De otra manera, lo que recibirías sería texto plano.

Puedes decirme si esta es la forma correcta?

La página que estoy viendo hace una consulta en ajax hacia el script "json.php" el cual se encarga de proporcionar todas las respuestas json de la web, en función del parámetro que se le pase.

En este caso le paso el parámetro notificación

json.php

Código PHP:

Ver original<?
/* FICHERO DONDE SE CREAN TODAS LAS RESPUESTAS JSON DE LAS DIFERENTES APLICACIONES */
 
// Notificaciones / mensajes de alerta
if (isset($_GET['notificacion'])){
    
    // Aqui va el codigo que comprueba en la base de datos si hay nuevos mensajes para el usuario
    // Si hay nuevos mensajes devuelve un JSON con la notificación
    
    $resultado= '{
    "elemento": "#notificacion",
    "msg": "Has recibido un mensaje nuevo de Darucilla!",
    "theme": "verde",
    "sticky": "true",
    "closer": "false"
    }';
    echo $resultado;
}
?>

¿Me podéis decir cómo hago para los valores de las lineas que he comentado las coja directamente de la respuesta json? no acabo de ver la manera de conseguir el resultado:

$('#notificacion').jGrowl("Has recibido un mensaje nuevo de Darucilla!", {
sticky: true,
theme: 'verde',
closer: false

pagina.php

Código Javascript:

Ver original$(document).ready(function() {
    $.ajax({
        dataType: 'json',
        success: function(data) {
                /*  $('#notificacion').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
                    sticky: true,
                    theme: 'verde',
                    closer: false
                */
                },
        url: 'json.php?notificacion'
    });
});

Muchas gracias de antemano!

mayid · #13 (**permalink**) 02/05/2010, 14:23

A simple vista, sin ahondas (porque estoy muy cansado) veo que estas pasando una variables GET vacia aquí:

json.php?notificacion

neodani · #14 (**permalink**) 02/05/2010, 15:20

Cita:

Iniciado por mayid

A simple vista, sin ahondas (porque estoy muy cansado) veo que estas pasando una variables GET vacia aquí:

json.php?notificacion

Sí, pero no debería ser problema ya que en la parte php compruebo si existe o no, da igual que tenga un valor o no... para este ejemplo es lo mismo

Código PHP:

Ver originalif (isset($_GET['notificacion'])){

mayid · #15 (**permalink**) 03/05/2010, 08:36

jSon es un conjunto de variables, que en javascript pueden accederse así:

success: function(data) {

alert (data.elemento);

}

Hace un tiempo no las uso. Pero hay comentarios en el foro sobre como recibirlas. Sino, proba data[elemento]

neodani · #16 (**permalink**) 03/05/2010, 11:09

Cita:

Iniciado por mayid

jSon es un conjunto de variables, que en javascript pueden accederse así:

success: function(data) {

alert (data.elemento);

}

Hace un tiempo no las uso. Pero hay comentarios en el foro sobre como recibirlas. Sino, proba data[elemento]

Conseguido! mil gracias mayid nuevamente por tus comentarios y tiempo

Código Javascript:

Ver original$(document).ready(function() {
 
// Funcion mostra notificaciones
function MostrarNotificaciones(){
    $.ajax({
        dataType: 'json',
        url: 'json.php?notificacion',
        success: function(data) {
                $(data.elemento).jGrowl(data.msg, { 
                sticky: data.sticky,
                theme: data.theme,
                closer: data.closer
                })
        }
    });
}
 
// Llamamos a la función
MostrarNotificaciones();    
});

Pregunta 1:
Debería sacar la declaración de la función fuera del $(document).ready(function() { verdad?

Pregunta 2:
Entonces ahora si añado la llamada en cada página a la función notificación
MostrarNotificaciones();
Cada vez que se recargue la página hará una petición en ajax al script 'json.php?notificacion' tengo que encargarme que para el usuario que esta visitando la página saber si tiene alguna notificación (nuevo mensaje recibido) o no y hacer un echo en caso que lo tenga

Así no?

Código PHP:

Ver original<?
/* FICHERO DONDE SE CREAN TODAS LAS RESPUESTAS JSON DE LAS DIFERENTES APLICACIONES */
 
// Notificaciones / mensajes de alerta
function Mostrar_Notificacion(){
    if (isset($_GET['notificacion'])){
        
        // Aqui va el codigo que comprueba en la base de datos si hay nuevos mensajes para el usuario
        // Si hay nuevos mensajes devuelve un JSON con la notificación
        
        $resultado= '{
        "elemento": "#notificacion",
        "msg": "Has recibido un mensaje nuevo de Darucilla!",
        "theme": "verde",
        "sticky": "true",
        "closer": "false"
        }';
        return $resultado;
    }
}
 
echo Mostrar_Notificacion();
?>

Muchas gracias de antemano!

mayid · #17 (**permalink**) 03/05/2010, 12:05

Cita:

Debería sacar la declaración de la función fuera del $(document).ready(function() { verdad?

Si. No se por que a veces declararla adentro da problema... Así que mejor afuera.

luuuciano · #18 (**permalink**) 12/08/2011, 20:09

Llego un poco tarde al tema este... ejjejeje

Pero por si le sirve a alguien el dato... enotify es una modificación para el script de foro simple machines forum
http://custom.simplemachines.org/mods/index.php?mod=2198

Hace uso de jGrowl para mostrar notificaciones cada x tiempo...
Se le podría ver el código y ver cómo se la ha ingeniado, etc...

(el tiempo predeterminado de chequeo lo tiene en 10 segundos... eso y un sitio más o menos concurrido hace que los hosting compartidos te suspendan al rato, y luego hay que estar lidiando con el soporte, etc... tener cuidado ejejej)