08/20/2011
Una mejor forma en la cual puedes refrescar infinidad de divs, lee el nuevo tutorial http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax
Buscando una forma de refrescar un div tag, sin necesidad de hacerlo a la pagina completa, me encontré con una guía en ingles, que me resulto sumamente fácil y efectiva de hacerlo.. Ajax (Asinchronous JavaScript and XML) es una poderosa herramienta, que hace el trabajo sin necesidad de que tu pagina se refresque completa y además que no parpadee en el momento de refrescarse. Para proseguir debes de estar seguro que tu tu Explorador soporta Javascript o que lo tienes habilitado y que tenes conocimientos básicos para editar los codes que te voy a proporcionar, el procedimiento es fácil y no es complicado, si saves que un tag div entonces lo tenes todo para continuar.. son tres archivos que editaremos en este ejemplo.
- ajax.js
- index.html
- tiempo.php
El documento Ajax.js tiene el XMLHttpRequest así que este es el documento JS mas importante lo podes renombrar si quieres, recuerda eso si, que si lo haces debes recordar que nombre fue el que le pusiste pues lo usaremos mas adelante…
Este código es en puro javascript, sin necesidad de otras librerías con JQuery, Prototype etc, si simplemente quieres hacer llamadas a documentos en tus webserver usando AJAX. sigue leyendo.
código del archivo ajax.js copia y salva lo como ajax.js
// Parametros mandatorios
var seconds = 2; // el tiempo en que se refresca
var divid = "contenido"; // el div que quieres actualizar!
var url = "tiempo.php"; // el archivo que ira en el div
function refreshdiv() {
// The XMLHttpRequest object
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}
// Timestamp for preventing IE caching the GET request
var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
var nocacheurl = url + "?t=" + timestamp;
// The code...
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.readyState != null) {
document.getElementById(divid).innerHTML = xmlHttp.responseText;
setTimeout('refreshdiv()', seconds * 1000);
}
}
xmlHttp.open("GET", nocacheurl, true);
xmlHttp.send(null);
}
// Empieza la función de refrescar
window.onload = function () {
refreshdiv(); // corremos inmediatamente la funcion
}Seguimos con el index.html, este puede ser una pagina html, shtml, php, htm.. Único requisito es que tu explorador soporte javascript, aquí usare como ejemplo index.html.
Código del Index.html copia lo y pega el código y salva lo como index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="contenido">
<h3>Refrescar una div tag con Ajax</h3>
// Aqui el Div en el que se coloca el contenido de Tiempo.php
<div name="timediv" id="timediv">
</div>
</div>
</body>
</html>Ahora bien en el mismo index.html encontras que existe este código.
<div name="timediv" id="timediv"></div>Este código también debe ir en tu html, es el que le dice al ajax.js que inicialice el proceso de refrescar y dice la ubicación del div, como ves el div no tiene contenido,
El codigo a sido actualizado para que la llamada ajax sea inicializada con el evento de Onload de el objeto del window.
El contenido esta en el tercer archivo que utilizaremos tiempo.php, este puede ser cualquier archivo sea , php, html, shtml , html etc. básicamente el contenido que tenga ira en el div de el html, en este ejemplo tiempo.php tendrá un script php, para dar la hora de el WebServer. Recuerda que esta Guía es para principiantes así que no te presiones mucho, poco a poco y todo ira saliendo..
El archivo tiempo.php
Este archivo tiene un simple script php para mostrar la hora en el servidor en que este tu pagina web..
<?php
// Formateamos la salida de la variable.
$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";
// Printeamos el resultado
echo (gmstrftime($str, time()));Con esto se termina la guía, espero sea de tu agrado no es difícil de seguirla para novatos como nosotros, comenta la guía.. gracias
Nota: si quieres leerte esta guía pero usando Jquery bueno leete Cambiar el logo de tu sitio web con PHP y JQuery .
Hola la verdad me parecio increible tu trabajo funciona a la perfeccion.
Gracias , por tu comentario sigo aprendiendo cada dia…
Man funciona perfecto y ya lo adapte a mi web y es mejor de lo que pensaba! IE, Firefox y Chrome lo corren al pedo! Eres uno de mis mentores del momento!
Felicidades! Y por cierto visita mi web cuando quieras y aconcejame para mejorarla!
http://dynlearning.com.ve
Esta expectacular tu web, cuando quieras nos pasamos Links no…
Avisa si te avientas.
Hola man gracias por el aporte pero me ¿? como seria para recargar los datos de una pagina entera osea no en un div toda la pagina(listo archivos desde una BD) y quiero q actualice cada x segundos espero que me puedas ayudar 🙂
deceo refrescar mi pagina para ver mis solicitudes de amigos
Bueno para empezar que clase de pagina es la que quieres que aparesca en el DIV..?
GRacias.
por tu script me sirvio bastante, y ademas lo adapte con base de datos.
Thanks!
Ni entiendo Java y menos Ajax, pero solo necesitaba esto para modificar los Div de mi página, gracias porque en verdad me ahorro muchisisimo trabajo…
Hola.. oye grandiosa tu explicacion y muchisimo mejor tu script… me funciono a la primera. Gracias.
Excelente ayuda muchas gracias
Muchas pero muchas gracias te pasaste con tu codigo y te agrdezco el tiempo tomado para escribir este post y explicarlo tan a la prefeccion funciona al 1000000% me salvaste la vida …sigue ayudandonos por favor
Gracias amigo, apenas y sigo aprendiendo también hise una guia pero usando Jquery , funciona a la perfección .. http://vcomputadoras.com/cambiar-de-logo-con-php-jquery/
Mil gracias!!
Me ha venido de maravilla pra un proyecto.
De todas formas tengo una duda y te agradecería mucho a ver si me la puedes aclarar.
Todo funciona a la perfección, pero en Firefox uso Firebug y me salta un error con esto:
fetch_unix_timestamp = function()
Alguna idea?
Gracias por tu ayuda
[php]var timestamp = fetch_unix_timestamp();
44 var nocacheurl = url+"?t="+timestamp;[/php]
Estas variables ayudan a que el request del ajax no sea cacheado por tu explorador evitando asi que se repita el mismo resultado…
yo uso firefox y no me a ningun error, chequea que las variables esten completas y que esten serradas ‘;’…
Por demas lo que pusistes no tiene un error, o no escribistes el error que le browser reporta..
Hola
Gracias por contestarme tan rápido, eres muy amable
La función y las variables están tal como las pusiste arriba:
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+\?t=\+timestamp;
El error no lo da Firefox por si mismo, lo da el complemento Firebug.
Esto es exactamente lo que me dice:
\assignment to undeclared variable fetch_unix_timestamp Line 38\
He googleado en busca del error, pero no he sido capaz de encontrar una explicación o solución
Repito, muschas gracias por tu trabajo y dedicar un rato de tu tiempo a contestarme
saludos cordiales
Lo e probado en mi testbed, i no me da el error que me comentas, también tengo firebug plugin instalado…
Si es asi puede ser que tu firebug este muy restrictivo i por eso de el error..
Declaremos la variable entonces, colócala antes del la función:
[php]var fetch_unix_timestamp ="";
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}[/php]
Aver si se quita el error de firebug..
Me comentas que paso porfavor…
Arreglado!!
No sé como darte las gracias por tu ayuda.
Un saludo
Gracias por tu información , e actualizado el código..
Excelente hermano, me ha servido muchisimo, es facil actualizar un solo div, claro con tu codigo, pero me he roto la cabeza tratando de que sean 3 los divs que se actualicen y no lo logro, tendrás alguna forma de hacerlo, yo he intentado modificando tu código, pero de AJAX apenas empece hoy y aunque conozco un poco de DOM y mucho de php no lo logro, gracias por tu tiempo.
Gracias me sirvió y lo adapté para que funcionara en varios divs con el mismo codigo, si alguien lo quiere que contacte conmigo
Hola, el tutorial es muy bueno, gracias me ha servido de ayuda. Pero tengo una duda, cuando lo utilizo y se me imprimen en el div (timediv en este caso) muchísimos espacios en blanco.
Me pasa con todos los navegadores, por qué puede ser?
te agradecería que me contestaras a la pregunta, muchas gracias.
Gracias por tu comentario,
Lo mejor que debes hacer es revisar el documento que estas accesesando con la function del ajax, aunque no estoy viendo tu script, puede ser que este printeando los espacios de tu documento..
Hola! pienso que tu script es muy bueno, pero tengo una duda.. estoy desarrollando un muro de publicaciones, donde el usuario hace su post y otros lo pueden comentar, tu script funciona muy bien, el detalle es que cuando alguien escribe un comentario.. se actualiza y el texto que el usuario lleva escrito se borra. que puedo hacer? como podria modificar tu script? te lo agradeceria mucho!
Hola,
Podrías explicarte mejor?
Como entiendo es así:
Cuando el div que esta siendo actualizado, el usuario que quiere poner otro POST y esta escribiendo, no le da tiempo de terminar de escribir pues la Forma esta en el mismo DIV que se esta actualizando?
por lo cual no le da tiempo de postear el mensaje, ya que el div se refresco sin darle suficiente tiempo..
Aclárame eso pues creo que es asi..
gracias..
Hola… Muy bueno tu codigo mil gracias.. una consulta habria alguna forma de que cuando se actualiza el DIV haga un efectito asi tipo fade_out();
Hola,
si es posible, pero tendrías que hacerlo con jquery o MTOOLS lo cual esta fuera del scope de este tutorial, is si se hiciera con puro javascript sin librería seria un montón de trabajo y code..
gracias por tu comentario.
Hola, no entiendo la parte de Tiempo.php? osea que codigo meto dentro del DIV ? el index.html contiene el DIV a refrescar, que va dentro de ese DIV ?, gracias de antemano.
Hola,
Amigo ese es el detalle, con ajax podes hacer llamadas a otros documentos y pasar la salida del documento a el div que tienes en el HTML, el div en el momento antes de llamar el ajax esta bacillo pero después de la llamada este sera llenado por el resultado de tu documento.. en el ejemplo del tiempo la salida del documento php es el tiempo del servidor el cual es insertado en el DIV bacillo.
hola amigo gracias por tu post esta espectacular funciona a la perfeccion, tengo una pequeña duda dentro de la pagina index.html he creado un menu con hipervinculos y quiero que cuando haga clic en uno de esos me mande a la pagina pero en el mismo div donde se muestra el tiempo.php como lo podria aser gracias por tu respuesta
Hum,
Deja haber si entiendo, lo que deseas es que cuando alguien cliquee el uno de los enlaces del menú, este corra el script y t cargue el tiempo.php en el div?
o lo que mas bien quieres es que cuando alguien cliquee en el enlace este corra la function y que te ponga el contenido de otro documento en el div , dependiendo del vinculo del hyperlink?
correcto?
estoy echo un nudo..
hola amigo mi pregunta a la parte de
o lo que mas bien quieres es que cuando alguien cliquee en el enlace este corra la function y que te ponga el contenido de otro documento en el div , dependiendo del vinculo del hyperlink?
exacto eso es lo q quiero hacer
Ahora mismo , estoy haciendo un tutorial de como hacerlo..
si andas por aquí espera un momento para ver el enlace.
ok aqui esta el tutorial, espero sea entendible.
http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
pues en el codigo del tiempo.php se puede agregar otros codigos de php por ejemplo mostrar otras cosas ke se requieran … la verdad esta muy padre el codigo ya ke siempre se puede hacer cosas muy interesantes
la verdad gracias por el aporte..
De nada es un placer amigo..
Muy bueno el codigo…pero tengo un ligero inconveniente en IE no me funciona, te agradezco tu colaboracion.
Hola,
Si me dices cual es el problema, me funciona de maravilla..
Esta probado para IE7 en adelante..
espero tu respuesta.
Excelente codigo, facil, entendible y lo mejor que el ejemplo funciona a 1000,
Gracias
Por tu comentario amigo, se te agradece.
hola que tal el script promete mucho!
aunque tengo problemas con el tiempo, no refresca cuando se lo pido lo hace cada que se le da la gana 😛 en forma aleateoria no respeta ningun patron de tiempo menos el indicado.
me gustaria poder tener la opcion para detener el refresh mediante un link en la pagina.
tambien algo mas complicado poder indicarle los intervalos de tiempo cuando debe refrescarse que no sea por ejemplo cada 5 segundos sino cada tiempo determinado, a 10 luego 25 despues a 15 etc, etc
Saludos!
Hola,
Bueno seria bueno que probaras el otro tutorial, en este metodo no podrias usar el script para actualizar mas divs..
Leete http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
Y me avisas si tienes complicaciones …
Si tienes dudas o no funciona coloca tu script code en los comentarios..
Para utilizar usando links (enlaces) leete este otro tutorial..
http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
Hola UTAN: Exelente tu post.
Quisiera hacerte una pregunta. Yo tengo un código que refresca un DIV de forma transparente (que no se nota). Mi principal problema es que cuando subo la información que debe mostrarse en el DIV cada 10 egundos, si coincide el tiempo que subo la data al servidor y el refresh en el navegador, el DIV se pone en blanco hasta tanto transcurran los 10 segundos y todo vuelve a la normalidad. Solo pasa eso cuando coincide, sino coincide todo va perfecto.
Hay algún Código que me ayude en esto. Yo actualizo una pizarra de béisbol y quiero que se refresque de forma que no se note el parpadeo cuando suba la información cada 10 segundos.
De ante-mano las gracias por tu respuesta.-
Hola,
Si lo que la llamada del ajax coincide con el documento que quieres mostrar y en el momento no esta disponible entonces el resultado retornado estará vasillo, esto es normal puesto que el ajax request recibe un error 404, el documento no existe hasta que los as subido.
Lo que aria es cambiar la cantidad de segundos que el ajax request ara para que sea muy pocas veces que coincida .
Espero que te ayude un poco.
gracias.
Gracias por la respuesta.
Esa opción la he hecho, pero resulta que si mientra más tiempo le pongo a la llamada, cuando de el Error 404 tardará ese tiempo que le de en volver a la normalidad.
Creo que la solución a ese problema sería que en vez de mostrarse el Error 404 (una pagina vacia) se cargara el documento que actualizo, ya sea algo hecho en otra pagina. Pero no se como hacerlo.
Ojala pudieras ver en horas de la noche la pizarra de la MLB.com al actualizar sus scores, eso es lo que quería lograr. La pizarra está hubicada en la columna izquiera cuando entras a la pagina principal.
Gracias UTAN, muy amable.
Hola,
Lo que no entiendo es porque tienes que subir el documento que llama a la base de datos la cual quieres que se actualice en el div.
Para que se mantenga el documento y los resultados anteriores mientras algo nuevo pase o se actualice , es que el documento este siempre en el webserver, cuando algo nuevo ocurrar este sera actualizado en el div, si nada es nuevo la información anterior sera mostrada..
espero estar entendiendo completamente.
Oh mi hermano, subo el documento porque va con nuevos resultados que deben mostrarse, más o menos cada 10 segundos.
Es una pizarra de beisbol y necesita ser actualizada cada vez que finaliza un episodio del juego.
Por eso te referí a la web de la MLB.com para que veas la pizarra que tienen en el home, al momento que inician los juegos (En la noche) esta te va mostrando las anotaciones que los equipo van haciendo.
Mi principal problema es la coincidencia en ocasiones, entre subir el documento actualizado y el refresh que proboca el Error 404 que sabemos.
Gracias UTAN
Hola,
Y como es actualizada esta información en la base de datos?
Esto lo haces manual al documento y lo subes, o tienes una forma que lo inserta en la la base de Mysql si es ese el sistema de datos que utilizas, si tienes que hacerlo manual tu mismo, llenar los records y de ayi subirlo con con tu programa FTP no hay mucho que hacer, pero sin embargo lo estas llenando la información usando una forma y salvandola en la base de datos entonces si es posible arreglar este problema, pues solo tendrías que escribir un script que contacte la base de datos y que de los resultados pertinentes..
Si se actualizaron este te dará nuevos resultados y si no es así tendrás los mismo que se mostraron en el pasado..
Creo que es así como ellos lo hacen en la pagina que mencionaste..
sigo al tanto..
Efectivamente UTAN,
Lo subo vía FTP porque no se nada de programación, lamentablemente.
Tal como explicas, debe ser vía Base de Datos con alguna tecnología que la MLB.com lo sube.
De todas maneras, muchas gracias UTAN por ser tan atento. Saludos y Dios te bendiga.
Es un placer siempre, cuando quieras ayuda solo avisa..
un placer .
Hola UTAN,
Soy bien novato con el ajax, te agradeceria de gran manera como hacer para actualizar un div (contiene una tabla) despues de presionar un boton de consulta (no quiero que la seleccion de la consulta se borre). Mil gracias por tu ayuda. Saludos!
Hola,
Podria ser algo asi?
[php]<html>
<head>
<script>
// Cambia estos parametros
var seconds = 5; // el tiempo en que se refresca
var divid = "actualiza"; // el div que quieres actualizar!
var url = "que documento?"; // el archivo que ira en el div
////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////
function refreshdiv(){
// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}
// Timestamp for preventing IE caching the GET request
var fetch_unix_timestamp ="";// lets declare the variable
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code…
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(‘refreshdiv()’,seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
// Empieza la función de refrescar
function startrefresh(){
setTimeout(‘refreshdiv()’,seconds*1000);
}
</script>
</head>
<body>
<button onclick="startrefresh();">Consulta</button>
<div id="actualiza">
</div>
</body>
</html>[/php]
Edita los parámetros del tiempo el div y el archivo al que quieres que aparezca en el div.
haber si entendí, espero te sirva.
gracias.
exelente tutorial!!!! funciona per fec to!!! lo adapte a mis necesidades y funciona a la perfección, felicitaciones y mil gracias x el aporte!
saludos cordiales.
pd. consulta como se podría hacer por ejemplo para para que supongamos los comentarios vayan corriendo tipo scroll hacia abajo a media que se van actualizando?
Hola,
Gracias, por la pregunta tendría que hacerse con jQuery ya que este tiene efectos bastante bonitos, i ademas tendrías que hacer que el documento que obtiene la información de la base de datos , muestre los mas actual primero y lo mas antiguo segundo, utilizas el jQuery ajax objeto y utilizas alguno de sus efectos..
espero te sirva.
muchas gracias por la respuesta, voy a ver si busco algo de jQuery entonces a ver que onda si veo como se hace, saludos y gracias por los aportes
hola amigo te hago una consulta, tenes o conoces algun codigo facil de implementara para armar un buscador con ajax, como se utiliza hoy dia, que al uno ingresar el texto a buscar automaticamente busque en mi base de datos? saludos
Hola,
No en realidad, si existe alguno estos funcionan usando el programa creados para ellos..
Ejemplo el script crea la base de datos i tienen una forma de texto que que la explota con php function explode() y con ajax te pasa la información y tu la colocas a cualquier parte de tu html div, para esto tendrías que codear-la para tu propia base de datos…
espero me aya echo entender… gracias.
me gusto mucho tu ejemplo esta muy claro de entender pero ahora mi duda es. como lo puedo aplicar en un jsp.
Hola,
Es fácil de aplicar solamente llama el documento que tengas el cual el servidor lo va a parsear, es decir correr, el resultado de ser txt o html markup, mientras tu servidor pueda utilizar el lengua y lo muestre a la web.. no deberías de tener ningún problema en usar Ajax ya que este es client side osea es el browser que hace la llamada no el servidor en si….
gracias por tu comentario..
Hola, soy novata en esto, me gusta el tutorial… pero mi pregunta es como hacer que ese mismo div cargue archivos diferentes de manera aleatoria???
Plis me urge respuesta =(
hola,
Es difícil contestar eso, puesto que el ajax solo llama al documento que le pides,
Ahora bien si ese documento cambiase aleatoriamente su contenido, el Ajax te lo pondría actualizado en el div que deseas.
Tendría que ver tu trabajo y saber de la idea clara que tienes en mente para ver si se puedes hacer..
gracias.
amigo tu sabes porque en nomas funciona en safari y firefox, porque lo probe en IE9 y opera y no me funciona=’
Extraño,
Yo lo probé en IE y me funciona bien, si quieres leete este otro tutorial, pues este ya no se mantiene pues es mejor el que cree , http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
te leo luego
Hola, muy buen material, pero me pasa lo siguiente:
le pongo en la variable seconds=60 y en una me actualiza en 45 segundos, luego lo ejecuto nuevamente y me sale en 30 seg. y nunca me da los 60 seg. que le pongo como parámetro. espero tu respuesta GRACIAS
Hola,
A mi me funciona de maravilla me podrías pasar el url de tu trabajo para verlo funcionando.
gracias.
Hola, probe tu trabajo pero me manda un error de accedo denegado al archivo de ajax la verdad no se que pueda ser ya lo modifique e intente de varias formas espero que me puedas orientar
El error es en la variable nocacheurl me la marca en esta parte xmlHttp.open(“GET”,nocacheurl,true);
Uso explorer 8 y no funciona ni en mozilla ni crome 🙁
Hola,
Me podrias dar un enlace a tu trabajo, cual es el error especifico si lo tienes disponible..
gracias
Hola, como puedo hacer que al hacer click en un lado o palabra recargue el div y no lo haga cada cierto tiempo, solo al hacer click!
Hola,
gracias por comentar, leete esta guia http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
si tienes mas dudas no temas en postear preguntas.
gracias.
gracias que gran aporte el mejor de los mejores me funciono a la perfeccion gracias este VENEZOLANO te lo agradece mucho
Hola,
Es un placer amigo, alguna pregunta solo as-mela saber..
gracias
Tu código funciona perfectamente, solamente le encuentro un problema, cuando tiempo.php le meto un código javascrip no me lo carga. Hay alguna solución?
Hum,
Acuérdate que para que te corra una código javascript tenes que declararlo como javascript..
osea , tendria que ver el codigo para darme una idea mas amplia de que clase de codigo es, o implementarlo com json o usando eval() de javascript..
gracias por comentar.
Gracias por contestar tan rapido Utan, el código en cuestión es este.
document.write(StreamInformation.CURRENTLISTENERS() +” oyentes en linea.”)
Lo que hace este codigo es mostrar los oyentes en linea que tiene mi radio online al usario.
El codigo no se adjuntado bien en el anteior mensaje, te lo adjunto otra vez.
http://www.mskmakina.net/radio/codigojava.rtf
Espero tu contestación.
Gracias!
Hola,
Lo que pasa esque javascript no puede correr un codigo si no es que el documento esta en el mismo dominio..
Esto evita ataques crossdomain..
te veo..
Entonces como lo soluciono? porque ese código javascrip que te he puesto funciona perfectamente, solo falla cuando lo pongo en el tiempo.php
y si quisiera para hacerlo para barios refreshdiv
Ruben,
tienes que hacerlo con php, usando la function file_get_contents();
haces una llamada ajax a un archivo en el mismo dominio..
digamos obtenerContenido.php
y esta hace un request a tu pagina, la respuesta de obtenerContenido.php es pasada al response de el ajax y con eso tienes tu resultados.
xoceunder,
leete esta guia pudede que te sirva.
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
gracias por escribir.
Buenas Uta, he seguido tu consejo y sigue sin funcionar o lo he hecho mal. Podrías echarme una mano?
Gracias!
Ruben,
En el response del ajax que tienes?
viene basio o u otra cosas.. tienes errores de javascript..?
todo eso es importante, para poder descifrar que esta pasando en realidad..
gracias.
En obtenerContenido.php pongo el código java que adjunte mas arriba hace unos dias. Seguidamente voy a archivo ajax.js y ahi no se que tengo que hacer :S.
Luego en el archivo tiempo.php pongo el file_get_contents(); que hace una llamada al obtenercontenido.php donde estaba el codigo java.
Es que yo el php lo tengo aun un poco verde.
Hola Ruben,
Sin ver el código no puedo entender que estas tratando de hacer o si lo estas haciendo correctamente.. Oh hacer correcciones si poner el código separado lógicamente puede echarle un vistazo, puedes pegarlo aqui mismo usando las “[ php ]” aqui en medio tu codigo de cada documento creado.”[ /php ]”.
Sin las quotras “” y sin espacios en ese bbcode.
Espero me entiendas.. gracias.
me salvaste la vida funcion muy buena gracias funciona de verdad perfecta
exelente funcion se las recomiendo
muy buena funcion
Hola, tu explicación es impecable y el script de lo mejor, solo tengo una duda, que pasa si quiero refrescar dos divs?, probé haciendo otro archivo .js cambiando el archivo php y el id, pero no funciona
Hola Ricardo,
Un placer que te aya gustado..
Leete esta guía que es basada de esta pero para refrescar múltiples divs.
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
Gracias
usualmente nunca comento, pero tú definitivamente te mereces mis respetos, muchas gracias por este aporte, en verdad, gracias
Ced,
Es un placer..
“De la web aprendemos, a la web le retornamos”.
Gracias.
Hola!, gracias por el tutorial, me viene muy bien, es ingenioso, como he visto, y no leido en ningun sitio la explicacion de la logica que sigue el codigo ajax, la dejo aqui con mis cortos conocimientos, y cualquiera puede corregirme.
Para los que quieran saber mas…
function refreshdiv();
Lo que hace esta funcion es inicializar un nuevo objeto xmlHHTprequest, el cual hace una llamada al servidor y la devuelve en la variable asignada, eso se consigue solo con new xmlhttprequest, el try catch es solo para asignar en el bloque try el codigo exitoso, y en el bloque catch el codigo para los errores, haciendo las comprobaciones pertinentes.
con onready changue entramos en un evento que se activa cada vez que se pasa de estado en el readyState, y dentro de el, colocamos la condicion if diciendo que si es 4, y es 200 haga el resto, esto es como decir, si todo esta cargado y lo as traido, muestramelo, o haz lo pertinente con el contenido.
y al final, hacemos el setTImeout(), que repite cada x tiempo una funcion asignada, esa funcion es refresh, que simplemente reinicializa la peticion cada x segundos, haciendo que se repita el proceso de recarga dinamica .
xmlHttp.onreadystatechange=function() if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){.readyState == 200
39//aqui deberia ir 200, que es cuando esta la pagina. document.getElementById(divid).innerHTML=xmlHttp.responseText;
40 setTimeout(‘refreshdiv()’,seconds*1000);
41 }
42 }
43
POR ULTIMO ABRIMOS EL ARCHIVO, PONEMOS A TRUE EL ASINCRONO, Y MANDAMOS CON SEND., OPEN Y SEND SON SOLO METODOS DEL OBJETO XMLHTTPREQUEST. xmlHttp.open(“GET”,nocacheurl,true);
44 xmlHttp.send(null);
BUENO Y ESO ES TODO, ESPERO QUE OS SIRVA PARA ENTENDER UN POCO MÁS CUALES SON LOS PROCESOS Y ASÍ HACER OTRAS COSAS DISTINTAS CON VUESTRO INGENIO;)
Gracias..
Muy bien explicado..
gracias de nuevo.
hola he probado tu codigo y me trae unos problemillas que no e podido solucionar cuando uso la variable
var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
var nocacheurl = url+”?t=”+timestamp;
me manda doble el resultado de mi pagina pero actualiza todo los cambios que ago y al poner la variable
var fetch_unix_timestamp =””;
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
me imprime la pagina normal pero no acualiza podrias decirme que hacer no se muy bien ajax
hola el codigo esta super bien pero tengo una duda un poco urgente necesito refrescar una pagina que no tiene div; es un archivo php que necesito que me actualize la pagina cada 20 segundos ojala me puedas ayudar es un poco urgente
Hi,
Al empiezo del script, o tu pagina php, coloca el siguiente codigo.
[php]
<?php
header(‘refresh: 20; url=/tupaginaArefrescar.php’ );
?>[/php]
Intenta a ver si te sirve..
gracias…
Hola
le quite todo el codigo anterior y coloque el header(‘refresh: 5; url=/actualizar_bd_skill12’ );
tal como lo escribiste y al actualizar la pagina no me
vuelve a reconocer la pagina me sale el aviso de objeto
no localizado 🙁 me ayudas
gracias
ya solucione el problema gracias 🙂 por tu ayuda
Ok,
Que bien, solo tenias que colocar el path de el archivo a refrescar..
gracias
Doc, muchas gracias. Tengo un problemita, uso tu ejemplo para en una pagina ver el contenido de otra mismo un iframe, pero no lo hace completo la pagina que quiero ver tiene una tabla y antes un combo. En la pagina principal solo veo el combo y no la tabla. Ahora esta tabla es de JQgrid, pero si funciona si voy directo a la URL donde se ve la tabla, alguna idea???
Hola,
Me parece que tienes que hacer un Ajax request a un php y luego este abre el contenido de la pagina remota, mandando el contenido de la pagina a el response del Ajax de ayi solo colocas el contenido en un Div usando el innerHTML o haciéndolo en el DOM..
la funcion que te serviria en php seria file_get_contents();
Saludos amigo una pregunta al actualizar hay usuarios que seleccionan el texto pero en dos 2s borra lo que fue seleccionado, como hay que hacer para que no pase eso y solo muestro lo nuevo
hola sirmartin,
Podrías explicarte mejor, no entiendo la pregunta….
gracias.
Gracias funciona perfecto
Gracias funciona perfecto. Pero tengo una duda. Sabes que quiero actualizar un div pero con noticias que saco de una bd. Como podria hacerlo? Tengo este div que esta en un .php
y quiero actualizar con los resultados que busco en una bd:
este vendria siendo tiempo.php en tu ejemplo
No se muestran los resultados, hago el del reloj y funciona.. Hago este y nada.. incluyo tambien el ajax.php asi que eso no es. Para mi que el problema es el tiempo.php o el div.. no se si tengo que cambiarlo porque me copié el tuyo del reloj
Como se hace para pegar los codigos? Copie mi codigo aqui pero no se ve..
hola, gracias por comentar..
Si la información la tienes en la bd, solo crea un documento que printee la información de la base de datos,
en la pagina con el ajax call solo indica en el script la url a este documento..
con esto tu pagina mostrando los resultado, llamara a este documento que printea la información y el ajax pasara esta información a tu pagina en que quieras que se muestre.
gracias
muy bueno, pero me gustaria saber como puedo hacer para “cortar” el refresco y que deje de actualizarse?
lo adapte a un chat para conversaciones de dos personas, y me gustaria que deje de actualizar el div cuando uno de los dos se desconecto d ela sala.
Actualmente cuando uno de ellos se fue de la sala se muestra un mensaje “el usuario se desconecto” que tendria que mostrar para que es script deje de actualizarse.
me seria de mucha ayuda una solucion a esa respuesta, gracias, sigue asi…
Hey muchas gracias por el script tan excelente amigo. Me va a ser de gran ayuda de aquí en adelante!! Un saludo.
Gracias Jersson,
Aprecio tu comentario..
Jersson, Gracias jaja! es genial 😉 . Esto tiene una usabilidad impresionante, por ejemplo para un chat en tiempo real o un sistema de noticias actualizadas. Grande realmente Grande :). P.D.:
…Una curiosidad: Al cargar una Imagen parpadea de acuerdo al interbalo Jaja!.
En realidad si la imagen no esta en el cache del browser del cliente..
Si te parpadeara en lo que se este cargando…
Es excelente! Una consulta aparte, yo lo he implementado y mi equivalente a tiempo.php a su vez tiene un include a un conndb.php, tuve que cambiar el formato include(“..\carpeta\conndb.php”) al físico (“C:\inetpub\etc..”), a que se debe?
mas datos: el error me indica que no encuentra a “conndb.php” referido en el include. Lo esta buscando en el directorio que corresponde a tiempo.php, seguramente a que en ayax.js cambie la var url al formato “..\carpeta_01\tiempo.php”
Hola,
Bueno ya que trataste con path abstracto desvistes intentar con mas y no usar el path concreto a tu directorio..
Yo usaria require_once aunque los dos trabajen parecidos el requiere_once solo conecta el archivo una sola ves en esa instancia…
Y si tienes que llamar la db en otro lado no te da error aunque lo llames de nuevo..
gracias por comentar.
Esta Increible el sistema!!!!!! Muy sencillo y eficaz!
Eres una máquina, gracias tio!!
hola esta rebien su codigo gracias, ahora necesito un favor, tengo un div con un scroll automatico e infinito donde se ven una a una las novedade sque dejan los usuarios, pero al bajar el scroll se sube solo hasta el principio del DIV supongo q es por lo que actualiza cada 3 4 segundos, entonces como hago para que el scroll se deje bajar normalmente, se lo agradezco del alma
Bueno soy nueva en esto… pero me interesa que cada x segundos mi pagina se recargue solo que necesito recargar 2 div ¿como puedo hacerlo? porque no entiendo muy bien como hacerlo
Al principio de este tutorial, hay un enlace que te indica como hacerlo..
agradezco que comentaras
excelente, en pleno 2013 y todavia funciona, te felicito
buenas noches disculpe pero tengo la sigue pregunta si quiero que se carge una sola vz la pag como se haria ya que el problema es q tengo q tener una pag html y que me llame una php pero solo una vz
Hola,
No entiendo bien, quieres llamas un php con una pagina html?
quieres hacerlo con ajax? porque en el html puedes usar la funcion require_once de php en tu html llamando el documento php que necesitas algo asi:
[[php]<?php require_once(‘tu pagina.php’); ?> [/php]
Espero haber entendido..
Está excelente; muchísimas gracias hermano; es lo que estaba buscando.
Bien por el aporte, actualiza muy bien, pero tengo un inconveniente amigo. es que mi div tiene un scroll infinito y cada vez que el div actualiza el scroll se sube automáticamente, sera que habra alguna forma para que el scroll no s suba, ya que mis compañeros leen esas novedades y es molesto que el scroll se suba solo…gracias…
Si,
Googlea por una function que te coloque el scroll en el punto del index donde se coloco nuevo contenido, esto siempre que se actualize con nuevo contenido el div..
[js]
scroll_div(divid){
var div = document.getElementById(divid);
var width = div.offsetWidth ;
div.scrollTo( 0, width.y );
}
[/js]
No la e probado, pero haber si te da una idea.
¡Muy bueno! Muchas gracias por compartirlo, me has dado un camino para arrancar mi proyecto! ¡¡¡Qué grande!!!
UTAN soy fan de tu código pero tengo una duda, como le podría hacer para que solo si se actualiza el div, mande llamar una notificación sonora, de verdad te agradecería mucho tu ayuda porque lo eh intentado sin éxito
GRacias carnal, sigue subiendo aportes asi, echale ganas
Hola. En el html “Refrescar una div tag con Ajax” debe ir fuera del div con id contenido o se borra (refresca) el div contenido y entonces no se ve el texto “Refrescar una div tag con Ajax”.
Saludos.
No necesitas nada en el div, y puedes borrar cualquier escrito que no sea código.
Hola me encanta este código pero no consigo adaptarlo a mis necesidades. Digamos que necesito que me actualice desde mysqli, si no le pongo condiciones WHERE en la pagina tiempo, me lo hace de maravilla, ahora el problema me surge cuando le pongo la condición, el el select. Alguna idea de como lo tengo que gestionar. Si no queda clara la explicación me lo comentas y te lo pongo detalladamente.
Hola,
En este caso esto es Javascript, el resultado que tiene el request te retorna el resultado de mysqli, cualquier que sea el resultado de tu consulta sea nada tiene que ver Javascript..
Lo que debes hacer es cerciorarte usando métodos convencionales, (asesando el documento php)que tu resultado es el esperado , después trabajas en la parte de JS.
Hala muy bueno el scrip pero tengo un problema el cual es q no coincide con la hora del servidor, utilizo mysql y apache (xampp) a ver si tiene algo q ver con el codigo o es algo q tengo q buscar yo aparte de antemano gracias
Hola a todos esta muy bueno el codigo pero no consigo establecer ejemplo que se muestre el contenido del DIv que de ceo actulizar y luego entre el otro div ,,, lo que me ocurre es que el div que tengo para actualizar entra en seguida …Alguien puede decirme porque?
Es impresionante la utilidad del codigo, podria hacerse que se actualize el div si se cumple cierta condicion?
@Javier,
Como por ejemplo que es lo que quieres hacer?
En el callback del objeto puedes comprobar si es valido as algo..
Pero se entendería mejor que es lo que quieres hacer para darte una mejor respuesta.
Hola, mi pregunta es como le haría para refrescar mi pagina cada 40 segundos
Quisiera saber como recargar mi pagina cada 40 segundos, la verdad no se mucho sobre el tema… Pero me interesa! =)
@Luna,
Al principio de
[js]var seconds = 2; // el tiempo en que se refresca[/js]
cambialo a “40” y salva el código..
gracias.
We no mames que chingón eres, llevaba un buen de tiepo perdiendo mis ratos libres para hacer esto y por fin pude gracias a ti…chido bro
Hola, disculpa. Seguir todos tus pasos, pero que tiene q pasar en si?
En mi navegador lo unico q sale es la fecha y hora (Y la hora no es la correcta)
Pero despues ya no pasa nada :/
gracias 🙂
Hola,
Gran tutorial.
He probado en mi web y funciona perfectamente pero tengo un problema. Me gustaría actualizar 3 archivos php en lugar de 1. ¿cómo debería hacerlo?
Gracias.
excelente bro, me ayudó mucho
@Javi , leerte el otro tutorial que hice..
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
Veo que al final lo.que haces es insertar un código php en el html sin recargar, pero suponiendo que tengo un div dentro de mi archivo,como puedo recargar ese div sin necesidad de mandar a traer nada de otro lado, solo recargar esa parte de la página
Hola oye muy buen código pero tengo un problema
solo quiero actualizar mi pagina una vez sin tener que poner los segundos para actualiza como se realizaría????
como actualizar otro div dentro del div que tienes hecho…???
Si se actualiza cada cierto tiempo no es en tiempo real?
Además si ejecuto una acción insertar tendría q actualizarse en otro navegador automáticamente sin mover un solo dedo
Hola
No me funciona sobre internet Explorer en win 10
Buenas, muchas gracias por el código. Funciona muy bien.
Quiero hacer una consulta porque tengo un problema en lo que lo implemente yo.
Lo que necesito es que redireccione a otra web supongamos cuando llega a segundo 9 por decir algo
Eso es posible ?
Explico un poco lo que hice y no me esta funcionando el redireccionamiento
El el archivo php yo hago una consulta a una base de datos que tiene web con horas determinadas del día
BIen, lo que quiero es que al llegar a la hora que yo tengo en la tabla de mysql (Este dato lo tengo en una variable php) al compararla con la hora que se esta mostrando redireccione a otra web
EL texto me lo muestra como, al llegar el horario justo, sale un texto en pantalla por lo que todas las variables se estan tomando bien, el problema que no le da importancia al redireccionamiento. Estimo que esto debe ser porque lo que redirecciona es el php dentro de la consulta y no el arhivo html en donde se esta mostrando.
Espero me puedan ayudar
gracias