Debido a un proyecto personal, me toco resolver como actualizar un div dentro de una pagina. La realidad era que mientras los usuarios se quedaban en una pagina, no veian la actualizacion de ese div hasta que la recargaban. En vista de este inconveniente se me ocurrio usar jQuery y un script por demas sencillo para actualizar ese div con el resultado de un archivo PHP.
<html>
<head>
<!-- Por comodidad uso la libreria de jQuery desde sus servidores. Si lo prefieren pueden usar la libreria alojada localmente. -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#reciberespuesta").load("respuesta.php");
var refreshId = setInterval(function() {
$("#reciberespuesta").load('respuesta.php?valoralazar='+ Math.random());
}, 60000);
});
</script>
</head>
<body>
<div id="reciberespuesta">
</div>
</body>
Explicacion:
El motivo por el cual se llama dos veces al script PHP es para que se cargue instantaneamente, y luego si empiece a actualizarse cada determinada cantidad de milisegundos. (En este caso, 60000 milisegundos, es decir 1 minuto.)
La forma de actualizar el div, llamado con una variable “valoralazar” en la url, es debido a que asi evitamos que la cache de Internet Explorer no permita la actualizacion, agregandole al final de la url un numero generado al azar, y por lo tanto “obligando” a Internet Explorer a creer que es una pagina diferente, forzando asi a recargarla.
Actualizar con un efecto de FadeOut/FadeIn.
Modificando las siguientes lineas pueden conseguir que al actualizar se desvanezca el contenido y vuelva a aparecer – llamando asi la atencion del usuario – utilizando fadeout() y fadein()
var refreshId = setInterval(function() {
$("#reciberespuesta").fadeOut("slow").load('respuesta.php?valoralazar='+ Math.random()).fadeIn("slow");
}, 60000);
Hola, podrias poner un ejemplo de como conformaste el archivo .php.
Gracias.
Hola Niko, en este caso el archivo PHP es totalmente indiferente, solo lo llamas para que se ejecute y devuelva su salida (echo, print,etc) al DIV correspondiente (en este caso el div de ID reciberespuesta.
¿Que problema estas teniendo?
hola dragonnegro, sé que esta entrada es bien antigua pero me interesa mucho, y tengo un problema, ojala que me puedas ayudar, resulta que utilizo en mi web la libreria corner de jquery y cuando “actualizo” la div, esta div no se redodea las ezquinas con esta libreria corner, sabras algo al respecto?
y mi segunda duda es si en tados los navegadores funciona el jquery o depende de la configuracion de cada uno?
de antemanos gracias.
Bueno,, ya sé que es de hace 6 meses casi, pero por si acaso alguien se pasa por aquí y tiene la misma duda.
El jQuery no te va a funcionar en todos los navegadores. En aquellos que tengan javascript desactivado… olvídate :/
Y para redondear los divs, puedes usar algunas de las propiedades nuevas que te ofrecen HTML5 y CSS3. Pero claro, tienes el mismo problema, que no todos los navegadores lo tienen implementado (de momento) y que todavía no está definido del todo el nuevo estándar (según tengo entendido).
Se hace con el estilo -moz-border-radius (firefox), y -webkit-border-radius (safari, creo que chrome, etc), se le pone el número de píxeles de radio y pista. En Internet Explorer no va, hay que hacer otras cosas más raras (igual ahora ya sí va, la última vez que lo probé no iba).
Busca en Google border-radius y encuentras todo lo que necesites para ponerlo bien. Yo me acabo de topar con http://border-radius.com/ que te lo escribe el código directamente xD es cómodo… Metes eso en tu hoja de estilos, y listo.
Hola, disculpa, tengo un problema.. solo quiero recargar el div.. pero se me va toda la pagina. queda en blanco mi pagina:(, heeelp
Gracias, muy buen artículos
ejemplo yo estoy en mi web que solo es para comentar y yo estoy en mi cuanta viendo fotos y tu me comentas entonces en mi perfil o en donde este con mi cuenta adentro automaticamente me saldra un mensaje con fancybox que me mandaron un comentario ya que no necesitare actualizar mi pagina sino ya se actualizara solo y me mostrara que me llego el mensaje asi como facebook cando te sale la notificacion de que le comentaron!! gracias!! suerte