En un POST anterior les deje un tutorial de como refrescar un div tag sin necesidad de refrescar la pagina completa, bien en esta ocasión e pulido mejor el código y e creado una función que refresque cualquier cantidad de DIVs sin necesidad que se refresque la pagina completa..
Esto facilita el uso del código para cualquier circunstancia que nos enfrentemos al crear nuestra web..
ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax
Refrescando diferentes div tags usando javascript y ajax.
La función que usaremos se llama refreshDivs(divid , secs , url) , la función acepta 3 parámetros mandatarios:
- divid = este es el ID del div que quieres refrescar.
- secs = los segundo en que deseas que el div se refresque.
- url = La dirección del documento que deseas que aparezca en el DIV.
El URL puede ser cualquier clase de documento, sea php, html, shtml etc ..
Ok ahora el paso a seguir es colocar en tu html entre los “<head>” tags el siguiente código abajo mostrado.
function refreshDivs(divid, secs, url) {
// define our vars
var divid, secs, url, fetch_unix_timestamp;
// Chequeamos que las variables no esten vacias..
if (divid == "") { alert('Error: escribe el id del div que quieres refrescar'); return; }
else if (!document.getElementById(divid)) { alert('Error: el Div ID selectionado no esta definido: ' + divid); return; }
else if (secs == "") { alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return; }
else if (url == "") { alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return; }
// 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 para evitar que se cachee el array GET
fetch_unix_timestamp = function () {
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url + "?t=" + timestamp;
// the ajax call
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById(divid).innerHTML = xmlHttp.responseText;
setTimeout(function () { refreshDivs(divid, secs, url); }, secs * 1000);
}
}
xmlHttp.open("GET", nocacheurl, true);
xmlHttp.send(null);
}
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh() {
refreshDivs('div1', 5, 'div1.php');
refreshDivs('div2', 3, 'div2.php');
refreshDivs('div3', 10, 'div3.php');
}
</script>
La parte del código donde indicamos que divs hay que refrescar es la siguiente:
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh() {
refreshDivs('div1', 5, 'div1.php');
refreshDivs('div2', 3, 'div2.php');
refreshDivs('div3', 10, 'div3.php');
}
Utilizando el evento window.onload hacemos que nuestro explorador corra la función y esta nos refresque los divs que deseamos que sean refrescado sin necesidad de recargar o refrescar la pagina completa..
Repite las funciones con diferentes div, tiempos y urls no hay limitaciones a la cantidad de veces que quieras usarla.
En nuestro ejemplo, usare documentos php, pero no es necesario puede ser cualquier clase de documentos mientra sean soportados por tu webserver o hosting service.
div1.php
div1.php sera un simple script que cambiara números al azar, como verán este es el documento llamado en la función arriba que es refreshDivs(‘div1′,5,’div1.php’).
Este documento sera llamado cada 5 segundos y se mostrara en el div1
Los otros dos ejemplos son similares a este primero, solo cambian el ID del DIV el tiempo en segundos y la url o la dirección del documento PHP.
<?php
echo "<p style=\"background-color:#FF7400\">Aquí obtendremos números al asar ".rand(1, 1000)."</p>";
?>div2.php
div2.php repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() .
<?php
$veces= rand(1,20);
for($i= 0; $i <= $veces ; $i++)
{
echo "<p style=\"background-color:#356AA0\">".." Por favor repite me, ".." $veces.</p>";
}
?>div3.php
Es el mismo caso para el div3.php, repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() , con la única diferencia que el color de el fondo es diferente y la cantidad de segundos a refrescar…
<?php
$veces = rand(1,20);
for($i= 0; $i <= $veces ; $i++)
{
echo "<p style=\"background-color:#C79810\">".." Por favor repite me, ".." $veces.</p>";
}
?>Estos son simples ejemplos donde podrás observar como trabaja la función de la que hablamos..
Otros usos
No solo puedes refrescar con Ajax divs si no también otros html tags, como span , form, tablas, H, P y otros mas , tan solo tienes que definir un id para esa tag, una nota importante es que al documento que se llame debe correr o parsear el contenido en tu servidor, ya que el Ajax es en el Cliente osea tu explorador.
Si este documento es un archivo TXT y tiene código javascript es posible que tu explorador lo corra pero si es archivo TXT tiene código PHP, JSP o u otros no sera parseado por el Ajax, lo que pinteara en tu pagina es el código en si tal cual..
Veamos todo el código con el 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>
<script type="text/javascript" language="javascript">
function refreshDivs(divid, secs, url) {
// define our vars
var divid, secs, url, fetch_unix_timestamp;
// Chequeamos que las variables no esten vacias..
if (divid == "") { alert('Error: escribe el id del div que quieres refrescar'); return; }
else if (!document.getElementById(divid)) { alert('Error: el Div ID selectionado no esta definido: ' + divid); return; }
else if (secs == "") { alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return; }
else if (url == "") { alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return; }
// 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 para evitar que se cachee el array GET
fetch_unix_timestamp = function () {
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url + "?t=" + timestamp;
// the ajax call
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById(divid).innerHTML = xmlHttp.responseText;
setTimeout(function () { refreshDivs(divid, secs, url); }, secs * 1000);
}
}
xmlHttp.open("GET", nocacheurl, true);
xmlHttp.send(null);
}
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh() {
refreshDivs('div1', 5, 'div1.php');
refreshDivs('div2', 3, 'div2.php');
refreshDivs('div3', 10, 'div3.php');
}
</script>
</body>
</html>
Puedes ver los ejemplos funcionando dando click en Refrescar varios Divs tags con javascript y ajax.
La función esta completa pues chequea que los parámetros estén definidos si no lo están un javascript alert te advetira del problema y el script terminara su función..
Por favor si te a gustado el código deja tu mensaje, y si encuentras algún problema no temas en postear aquí mismo gracias por Leer..
En nombre de muchos que solo pasan y miran, pero no comentan, te quiero agradecer porque me has ayudado muchisimo. Sos un fenómeno!! Saludos
Hola,
Te lo agradezco sinceramente.
mis gracias.
Muy buen tutoria, felicidades.
Una sola pregunta, cuando lo implemento, los div se actualizan a los x segundos, pero mientras pasa esos primeros segundos, los div estan vacio.
Esto es asi, o he hecho algo mal?
Hola,
Gracias por tu comentario, en mis pruebas y en la pagina de ejemplo, el script funciono instantáneamente es posible que tengas mucho markup en tu pagina.. digo esto puesto el evento window.onload espera que la pagina este absolutamente cargada esto se incluye las foto y demás imágenes que puedas tener..
Un enlace a tu tu trabajo seria lo mejor para ver el código.
gracias amigo.
Hey gracias por el aporte, aun estoy aprendiendo programacion web, probare el codigo y estare posteando como me ha ido :]
Hola,
Gracias vani por tu comentario..
estaré al pendiente.
Tremendo. Lo estoy probando en mi pagina y funciona.
Un pregunta, sería posible pasar variables a los php que se ejecutan en cada div? Como lo podría hacer?
mil gracias de verdad
Hola,
Gusto que te funcione, mira PHP es programación server side y Javascript es client side..
Por esa razón Javascript no puede pasarle variables a PHP , pero si en viceversa…
Si te pones a pensar imagínate alguien corriendo un Xss en Javascript y que la variable de PHP lo ejecutase..
Seria destructivo..
gracias por comentar.
Tienes razón. Ya lo he montado para que no me haga falta pasar variables, siplemente duplicando un poco de código.
Funciona de fábula!
y para aplicar recargar difentes contenidos en un solo div, un ejemplo que cuando pulses un link te muestre un contenido en el DIV1 y que cuando pulse otro link te muestre otro contenido en el mismo DIV1, pero eliminando el contenido anterior?¿
Hola,
digamos que tienes el documento tal, documento1.php y documento2.php tienes la pagina central y lo quieres usar:
entonces creas los enlaces asi:
[php]
<html>
<head>
<script type="text/javascript" language="javascript">
// creamos esta variable con global scope
var timeout = ”;
function refreshDivs(divid,secs,url)
{
// define our vars
var divid,secs,url,fetch_unix_timestamp;
// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert(‘Error: escribe el id del div que quieres refrescar’); return;}
else if(!document.getElementById(divid)){ alert(‘Error: el Div ID selectionado no esta definido: ‘+divid); return;}
else if(secs == ""){ alert(‘Error: indica la cantidad de segundos que quieres que el div se refresque’); return;}
else if(url == ""){ alert(‘Error: la URL del documento que quieres cargar en el div no puede estar vacia.’); return;}
if(timeout)clearTimeout(timeout); // limpiamos el request que se aya echo previamente.
// 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 para evitar que se cachee el array GET
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
timeout = setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<a href="#" Onclick="refreshDivs(‘div1′,10,’documento1.html’);return;"/>Cliquea para mostrar el documento1</a>
<br />
<a href="#" Onclick="refreshDivs(‘div1′,10,’documento2.html’);return;"/>Cliquea para mostrar el documento2</a>
<div id="div1">
</div>
<br />
<div id="div2">
</div>
</body>
</html>
[/php]
Al presionar el enlace para mostrar el documento1 ara la llamada ajax a el documento1.php y lo mostrara en el div1, si presionas el enlace al documento2 este mostrara el siguiente borrando todo lo que había en el div previamente y terminando el request previamente echo, para hasi no tener llamadas paralelas recursivamente
espero te sirva
UTAN.
Gracias amigo!!!!
Muy bueno, justo lo que estaba buscando para terminar mi chatsaludos.
muy buneo, justo lo que estaba buscando
Me ha funcionado. Perfecto.
Gracias
Hola, muchas gracias por este tutorial, me ha servido para plantear lo que quiero hacer, pero ahora mismo me surge una duda y es la siguiente; tengo un arrays de feeds RSS y quiero que el div se vaya actualizando con los titulares, para ello quiero recorrer este array. He pensado hacerlo con una variable de session que contabilice el número de veces que se ha refresacado el div pero parece que no funciona, alguna idea de cómo saber el número de veces que se ha refrescado el div?? Muchas gracias de nuevo
Bueno,
mi idea seria que actualizes tu array con los ultimos feed a el empiezo de este y despues haces un loop en el array digamos con un numero digamos de 10 , este recirrera el array hasta 10 indices y con el ajax solo haces el request, mientras actualized el array y pongas lo mas nuevo al principio deberia de funcionar..
gracias por tu comentario.
Saludos desde Ecuador, estoy revisando el tutorial tuyo y me interesa usarlo pero la verdad no se por donde arrancar.
Mejor dicho te explico a ver si me pueder indicar si estoy bien o mal.
Resulta que tengo 3 archivos en html. estoy me estan sacando de un xml una informacion de temas musicales que una radio los emite en tiempo real los temas musicales
1. Arcihvo AlAire.html es el fichero que publica que tema esta al aire:
2.- Archivo AlAireNext.html es el fichero que publica los proximios 5 temas que sonaran.
3.- Archivo AlAireHistory.html es el fichero que publica los 5 temas que ya sonaron.
El detalle es que necesito que cada uno se actualice solo, sin necesidad de presionar F5 o que el usuario sufra una intermitencia.
y la otra es que quiero integrarlos en un archivo index.
he seguido los pasos del tutorial, pero ando confundido.
agradesco tu respuesta.
Hola,
Agradezco te comuniques y te guste el tutorial..
Si entiendo bien tienes ya los documentos estos te dan el resultado deseado, sin ningun problema..
Bien para llamar a cada documento y actualizarlo en los diferentes divs aria esto:
[php]
<script type=’text/javascript’>
//Aqui coloca todo el codigo anterior.. del tutorial
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs(‘div_alAire’,5,’/tufolder/AlAire.html’);
refreshDivs(‘div_AlaireNext’,5,’/tufolder/AlAireNext.htm’);
refreshDivs(‘div_AlAireHistory’,5,’/tufolder/AlAireHistory.html’);
}
</script>
</head>
<body>
<div id="div_alAire"></div>
<div id="div_AlaireNext"></div>
<div id="div_AlAireHistory"></div>
</body>
</html>[/php]
La función a llamar refreshDivs(divid,secs,url);
Y los argumentos son el divid = al div donde quieres que se refresque el contenido de tu documento.
El secs = los segundos en que quieras que se refresque.
Url = la dirección completa del documento al que quieres asesar o llamar.
Espero que te sirva..
gracias utan.
Hola!
He implementado tu código y funciona perfecto. Gracias! Sin embargo, estoy intentando ampliarlo para poder parar la actualización del div, pero mis conocimientos de ajax son muy limitados… :$ Se puede hacer de manera simple?
Muchas gracias de nuevo!!!
Hola,
Ampliarlo enque forma?
y hacerlo mas compacto es a lo que te refieres?
Compacto lo es..
Ampliarlo , pues hace lo que se le pide haciendo llamadas de ajax..
Perdón! Creo que no me he explicado nada bien…
He conseguido hacer que el div se empiece a actualizar, pero no sé cómo pararlo…
Necesito conseguir lo siguiente: Tengo un select. Cuando cambia el valor del select se empieza a actualizar en el div ‘div1.php?NDisp=1’. Si se vuelve a cambiar el valor del select se tendría que parar de actualizar ‘div1.phpNDisp=1’ y empezar a actualizar ‘div1.php?NDisp=2…
Es posible?
Ya lo siento por no haberme explicado anteriormente y muchas gracias otra vez!
Estoy intentando realizarlo a partir de la modificación que le propusiste a memo el 18 de diciembre, porque creo que se asemeja a mi caso.
Te cuento con los avances.
Muchas gracias de todas formas
Hola,
Ya lo recuerdo…
si úsalo te debería de servir..
bye
Hola,
Conseguido con la modificación que te comentaba. Muchas gracias!
Hola!
Sigo empleando tu código para mi proyecto, y tengo un problemilla: Tengo un select con un evento OnChange en el que se ejecuta la función refreshDivs
<option > Day Trend
<option > Day Production
<option > Daily
<option > Monthly
En ese div ‘InvProd’ quiero mostrar una gráfica que se dibuja en el archivo ‘InversorProd_aux.php’, que es el siguiente:
AC_FL_RunContent = 0;
<a class=excel_graf href=><a class=excel_graf href=><a class=excel_graf href=><a class=excel_graf href=>
AC_FL_RunContent(
‘codebase’, ‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,45,2’,
‘width’, ‘1042’,
‘height’, ‘750’,
‘scale’, ‘noscale’,
‘salign’, ‘TL’,
‘wmode’, ‘transparent’,
‘movie’, ‘charts’,
‘src’, ‘charts’,
‘FlashVars’, ‘chart_id=graf1&library_path=charts_library&xml_source=’,
‘id’, ‘graf1’,
‘name’, ‘graf1’,
‘menu’, ‘true’,
‘allowFullScreen’, ‘true’,
‘allowScriptAccess’,’sameDomain’,
‘quality’, ‘high’,
‘align’, ‘middle’,
‘pluginspage’, ‘http://www.macromedia.com/go/getflashplayer’,
‘play’, ‘true’,
‘devicefont’, ‘false’
);
Este último archivo funciona ok cuando lo ejecuto directamente sobre la barra del navegador, se muestra la gráfica perfectamente, pero no me carga nada sobre el div…
¿Estoy haciendo algo mal???
Gracias otra vez!
No sé por qué no puedo copiar los código correctamente…
Siento haber duplicado el post…
En resumen, mi pregunta es: ¿por qué no se muestra ningún mensaje si en el ejemplo div1.php fuera así?
<?php
echo "Aquí obtendremos números al asar “.rand(1, 1000).””;
?>
window.alert(“Esto es un mensaje de texto”);
Hola,
si quieres pegar el código y que se vea bien, usa los bbcodes de PHP, [ php ] [/ php ] sin los espacios y haci se mostrara bien el codigo..
[php]
<script type="text/javascript" language="javascript">
window.alert(“Esto es un mensaje de texto”);
</script>
[/php]
Intenta , usando las script tags, si no inspecciona el response del Ajax y mira que no lo este ofuscando.
Seguiré por aquí.
Estimado,muchas felicitaciones, muy bueno el tutorial, una consulta como lo podria adaptar a lo siguiente, tengo un div donde agrego un registro a traves de ajax y devuelvo el resultado a ese mismo div, pero tambien luego de esa consulta tengo que actualizar otros div (con consulta a mysql)
por otro lado, que tan destructivo seria que de php le pase valores a java y luego de java actualize un div??? porque lo hago.
saludos
Hola UTAN!
Tengo añadidos los scripts tags, pero al pegar el código han desaparecido! :S
Mis conocimientos de Ajax son muuuy reducidos. ¿Me puedes dar alguna pista de qué tengo que mirar del Ajax?
Creo que sí puede ser algo de eso, por que si ejecuto el div1.php directamente sí se muestra el mensaje, pero si lo llamo traves del refreshDivs no…
Muchas gracias por tu tiempo!
Hola,
Inspeccionaste el ajax reponse?
Utiliza una herramienta como el firebug, usandolo asi console.log(xmlHttp.responseText);
Observa si se esta escapando el javascript.. si lo hace tendrás que utilizar la funcion eval();
para evaluar el javascript i que lo corra la pagina..
Si pudieras darme un URL publico a tu trabajo podría ver de una carrerita.
Hola Ivan,
Sobre que pases variables de php a javascript no hay problema alguno, lo que no se puede esque javascript le pase a PHP, ya que Javascript se corre en el cliente, y PHP en servidor…
Sobre la pregunta de tu script, no tengo una idea clara de lo que deseas hacer, me explicas un poco mejor..
gracias.
Muchas gracias men, por este codigo lo modifique un poco para adaptarlo a mis necesidades, y ya lo puesto a trabajar en una aplicacion cliente servidor,
muchas gracias, va de maravilla!!
Una Consulta Urgente como lo paro, no logro elinar el refresco del div
ojala me puedas ayudar gracias!!
Hola,
En los comentarios le respondo a nuestro amigo “MEMO” , leete ese código, puede que sea de ayuda..
gracias.
hola, primero que nada felicidades por el tutorial, muy bueno!! Ahora mi problema: En el index.html tengo un enlace a documento1.php donde tengo un formulario mezclado con codigo php. Hasta este momento me funciona bien, es decir me refresca el div y me muestra el formulario. Este contiene un text y un submit. El problema sucede cuando quiero procesar los datos ingresados al formulario (cuando hago click en el submit) y q el resultado me lo muestre en el div en el cual estamos refrescando. Bueno espero q c entienda y q me puedas ayudar, un saludo!
Hola,
Entiendo lo que pasa.
No puedes hacer eso , o al menos nunca e intentado hacer cosa alguna así… De la forma que es estándar es que tengas una forma esta llame el ajax mande los datos a un php y este te de el resultado de regreso en el retorno del Ajax, si esta forma tiene un div id puedes utilizar este mismo div para mostrar tu resultado, ya sea si el php estuvo bien mandar un mensaje o enlace o cualquier cosa que quieras mostrar cuando todo salio bien, si no es haci mandar un mensaje que diga que algo salio mal…
Si entendí avísame gracias.
Vientos bro!! te la rifaste, habia estado buscando x inet algo relacionado con actualizaciones en tiempo real con ajax y puro codigo k no se entendia e inservible, pero el tuyo funciona a la perfeccion, lo he implementado con un proyecto k estoy realizando de inventarios en tiempo real en JSP y la verdad funciona de maravilla, me salvaste, un saludo y grax
hola,
Me alegro que te allá servido para mi es un gustazo..
bye
No es mi constumbre comentar, pero no quise dejar pasar esto, es espectacular lo que has hecho, un codigo simple y funcional, y mucho mejor al compartirlo con la comunidad.
GRACIAS.
Martin,
Agradezco tu comentario..
Sabes que tengo un div con el codigo tuyo de tiempo.php y la hora no me sale bien.. Me da un dia demas… Gracias
este script me sirvio muy bien para refrescar un div con el contenido desde un archivo con consulta a la bd, pero queria saber como se hace para desactivar el “refresco” al desconectarse uno de los dos usuarios que estan charlando, ya se como identificar que uno se fue.
la pregunta seria, que tengo que mostrar en ese momento para que se interrumpa el refresco, gracias, sos un genio
Para evitar mas llamadas Ajax necesitas poner el setTimeout() en una variable global y cuando el usuario se desconecte..
destruir esta variable con el metodo clearTimeout() y ya no tendrás mas llamadas ajax..
hola necesito de su ayuda, tengo una pagina en la cual muestro un listado de una tabla de una BDD, en cada fila al final tengo un enlace en el cual realizo un clic y actualiza ese registro en la BDD…..
al cargar la pagina dependiendo de como este ese registro en la BDD.. toda la fila la muestro en negrita,
lo que yo quiero es al hacer clic en el enlace al final de la fila se me actualice únicamente esta fila…(al actualizar lo que yo hago es cambiar de color esa fila)…espero me den una respuesta (lo que quiero evitar es la actualización de todos los registros nuevamente) (cabe mencionar que cada fila tiene su respectivo id) espero me puedan ayudar con un ejemplo
Hola,
No entiendo la pregunta, me parece que debes de colocar el código o poner un enlace de tu trabajo para entender que tratas de hacer..
gracias por comentar
ok, se muy poco y nada de js, pero estuve probando con esto y no funciona:
al desconectarse uno de los dos usuarios se muestra esto en la pantalla del que no se desconecto
[php]
<body onload="parar()">
[/php]
con la idea de que evite la actualizacion destruyendo la variable global
[php]
timeout = setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
[/php]
con esta funcion:
[php]
function parar(){
clearTimeout(timeout);
alert("Sin actualizacion ");
}
[/php]
la funcion funciona perfectamente cuando uso el boton:
[php]
<input type="button" name="Button"
value="Parar" onclick="parar()">
[/php]
por lo que parece que la variable global esta bien puesta, pero necesito que la variable se destruya sola mostrando el codigo una vez que uno de los dos se ha ido, podrias ayudame a solucionarlo, es muy importante para el trabajo que estoy haciendo y por mas que lo intento no lo puedo resolver
muchisimas gracias UTAN
Muy bueno tutoriales, creo que en efectos son los que necesito, mi problema trata a cerca de un feed de noticias como el de facebook o twitter, lo que busco es que se actualice solo y no que para ver lo que la gente comenta tengas que dar F5, por favor me podrías ayudar?
Este código ase eso mismo..
Por-favor lee nuevamente.
gracias por comentar.
Hola!
Encontre varios codigos que me son utiles unicamente para hacer una consultas… sin refrescar la pagina…
Busque este tema por que tengo varios divs en mi pag que deseo se actualizen con diferente informacion pero no logro hacerlo..
En dos de ellos necesito que cargue una consulta diferente en diferentes divs una para la pag y otro para un popup igual en un div de jquery…
No se si puedas ayudarme..
Saludos.!
Hola,
Este tutorial ase lo que buscas, ahora no es jQuery asi que no te serviria mas bien no lo necesitas pues jQuery tiene su propio ajax request..
Gracias por responder tan rapido..:O
pues refresca varias cosas.. pero he intentado hacer varias consultas diferentes… de diferentes origenes y con resultados en diferentes divs en una sola pag.. me chocan y los muestra en el mismo div no en el que le indico… en fin gracias por responder.!
Hum,
As utilizados diferentes divs y diferentes documentos para hacer la consultas..
Si revisas el ejemplo funciona a la perfección..
no puedo ayudarte si no miro el codigo que estas tratando de correr.
Gracias por contestar de nuevo jejeje..
en este puente tuve tiempo de revisar mas a fondo tu código y ya entiendo mejor lo que hace ahora tengo una duda por que si muestro una pagina fija osea algo ya predeterminado en el div si lo hace pero por ejemplo si yo quiero que determinado un campo de la pagina actual realice la consulta en la otra pagina… como paso ese parametro a la otra pagina…??? por que tengo un codigo que hace eso pero si quiero usarlo para diferentes divs me chocan como te decia…
Estoy trabajando con JSP esto es lo que deseo que me regrese en el div a ver si me explico mejor asi….
Insert title here
La direccion no existe
jajaja waa no se ve..:S bueno recibo un ´parametro con request y dado ese parametro evaluo realizo una consulta la mando si existe en la base de datos despliego la informacion si no mando un mensaje de error..
ojala puedas ayudarme.. Saludos.!
Por fin encontre algo q necesitaba. Muy buenos tus tutoriales, felicitaciones y gracias por compartir lo que sabes con los demas… Revise todo esto y lo adapte a lo que keria y me funciona a 100%. Espero no sea molestia que mas adelante te pueda pedir alguna ayuda en algo… (Y).
hola,
Con gusto mientras este al alcance de mis conocimientos..
Ya sabes no todo se sabe pero se aprende en el camino..
gracias
@Kelpie ,
no entendí tu propuesta, ademas que me perdí de tus mensajes..
Tendría que ver tu código para entender la idea en si de lo que deseas hacer.
usa las tags [ php ]//código aquí [/php] sin los espacios.
espero respondas.
Veras no tengo muchos conocimientos de programar pero me defiendo, he visto el código que has puesto y me gustaria utilizarlo para mi página que estoy haciendola en estos momentos.
Mi problema es que en la página web muestro dentro de un div varias fotos, para seleccionar las caracteristicas de las fotos que deseo ver utilizo un formulario para filtrar las mismas de una base de datos en dicho formulario tengo varios selects y varios checkbox hasta ahora cuando selecciono algo en ellos con el evento onchange recargo la misma página completamente lo que me provoca el correspondiente parpadeo, lo que necesito es que se actualicen las fotos del div segun lo seleccionado con el formulario de filtrar sin recargar toda la página, solo quiero recargar el nuevo contenido de ese div.
¿Como lo podria hacer?
¿Que cambios tengo que hacer en el código que has puesto?
Perdona mi ignorancia.
Un saludo y gracias.
Hola,
Si el código te serviría también lo que necesitas es mandar la información con el ajax a tu documento php o el que uses.. este debe darte un retorno con que se pasara a el div seleccionado en el script..
Ya que utilizas el evento onchange , al darle submit este te lo manda al documento php haciendo que se refresque la pagina completa.. envés de refrescar el documento manda el ajax call y en response obtienes el update para tu div..
Hola de nuevo, esto es algo diferente al tema, quisera si me pueden ayudar en esto… PASAR UNA VARIABLE A 2 PAGINAS CON UNA FUNCION AJAX… espero puedan ayudarme a encontrar la solucion..
Hola,
Si es posible usando Ajax.
puedes pasar un objecto en forma de Json a la pagina y tener como respuesta otro json y trabajar con ello..
Tendrías que explicar con detalle cual es el caso..
UTAN
Realmente agradecido por tu aporte al conocimiento de cómo ocupar Ajax.
Desde hace meses que estaba intentando hacer el refresco de unos Divs y no lograba hacerlo.
Gracias de nuevo
UTAN
Estoy tarbajando con un PLC al cual me comunico a través de ModBus y puedo obtener los valores de muchas variables.
Como puedo manejar esos valores para que el Cliente pueda refrescar en su pantalla los mismos valoes?? Puedes darme una mano con eso??
Desde ya gracias
Aunque no e trabajado con modbus, apenas i le di una búsqueda..
Si estas haciendo llamadas a un php por ejemplo y estas obteniendo los resultados con este, puedes pasarlo como json y trabajarlos en el lado del cliente..
De esta manera, trabajas algo asi.
[js]
if(response.var){
// as algo con este objeto
}
[/js]
agradezco tu comentario.
Gracias UTAN,
Investigaré acerca de JSON antes de seguir consultando.
Otro punto. MI idea es compartir la informacion obtenida del PLC en forma OnLine, por tanto debe ser lo más rápido posible su actualizacion, estoy hablando de 250 ms. Has usada memoria compartida con PhP? Podría ser esta una via a tener informacion de acceso mas rápido?
Saludos
No,
Para eso sugiero , push technology oh en su caso Node y socket.io en el cual puedes hacer un setTimeout() a un archivo que accede esta información y entonces la pase a los client en tiempo real..
Esa es la manera que lo aria, sin embargo si no tienes un vps o server tendrías que usas ajax el cual podrías tener delay si el client esta bajando algo algún archivo y su connection este siendo usada..
Me has salvado la vida.
estoy apunto de entregar mi proyecto y andava buscando esto, no acostumbro a comentar en los foros, pero esto si lo merece, en verdad que al verlo me sorprendio muchisimo, mis mas sinceras felicitaciones, sigue asi
Quiero agradecerte compañero! Me ayudo mucho tu post! 😀 Sos una gran persona!
Para lo que necesites!
Es un placer amigos..
Buenos días, he utilizado tu script y va de maravilla, hoy me tope con que la página que necesito imprimir en el div contiene javascript y ajax y no logro hacerlo funcionar, podrías ayudarme?
Bueno si lo que el callback del ajax request contiene javascript dever evaluarlo primero usando el metodo eval().
Pero ojo necesitas serciorarte que nadie puede injectar javascript en el archivo que llamas o pues aser un xss y esto no es bueno.
Gracias, pues he intentando de mil maneras y no lo he logrado, solo con jQuery. Gracias por tu atención..
Estoy probando el código para implementarlo en mi web…pero me gustaría saber si es posible al configurar en vez de mostrar en el div una pagina, actualizar un div de la misma pagina.
En mi web tengo por una parte el header.php (donde esta el menu principal) y el footer.php y luego las paginas con el contenido y en cada uno cargo el header y el footer.
Lo que quiero es en el contenido en unos div específicos que se actualicen pero no cargando una pagina sino actualizando su mismo contenido.
Gracias
Si, esto debería de ayudarte..
Lo que no entiendo es porque no lo estas usando asi.. si en el header pones nueva información solo tienes que hacer un llamada ajax a un archivo con la nueva información y pasarla a un div en tu header..
Hola:
Tras mucho buscar encontré tu tutorial que me parece fantástico.
Pero… a mis 66 años y mis escasos conocimientos de PHP no consigo dar con la linea de código necesaria para cambiar la propiedad background-image en el fragmento div1.php de tu ejemplo… (<?php
echo "Aquí obtendremos números al asar “.rand(1, 1000).””;
?>)
para hacer que muestre una imagen (por ejemplo:img/n0.gif)
¿ Tendrias la mabilidád de pasarme un ejemplo ?
Gracias anticipadas
Hola, con gusto ,
Bueno si quisieras esto al azar lo haría así.. en el folder donde están las imágenes las renombraria como imagen1.gif, imagen2.gif y así sucesivamente..
Ahora el metodo rand() acepta los parámetros empiezo y final.. entonces
[php]<?php echo ‘<img src="imagen’.rand(1 , 10).’.gif" />’; ?>[/php]
No lo prove por errores peo mira si ese ejemplo te da una idea.
Pero el ejemplo printearia imágenes del 1 al 10 , y ya que las imágenes están renombradas debería funcionar correctamente.
Que tal..!!!
Me gusto mucho el tutorial, pero tengo un pequeño problema, cuando mando a traer los archivos.php, en uno de estos contiene una alert personalizada, y esta no me aparece, no se si me puedas Ayudar.
Hola,
Me puedes mostrar el codigo que estas usando…?
es algo asi?
[php]
<?php echo ‘<script>alert("bienvenidos");</script>’; ?>[/php]
tengo que ver que lo as escrito.
Buenas sabes este tutorial fue de muchisima ayuda me has salvado, pero tengo una pequeña pregunta, tambien funciona con html5?
Lo que sucede es que estoy probando para que me actualize un foother que si se actualiza el problema en si es que en la parte donde va el foother me vuelve a parecer toda la pagina
:’) te amo mil gracias :’)
me parece de gran ayuda tu trabajo así por personas como tu es que el conocimiento sigue creciendo muchas gracias
hola amigo, probe el código y no funciona, no actualiza el div especificado, en este caso en mi website..
Perfecto, de mucha ayuda, gracias.
muchas gracias me sirvio muchisimo…
muchas gracias amigo funciona perfectamente el codigo era lo que estaba buscando de nuevo muchas gracias y espero sigas publicando mas tutos de interes relacionados al tema.
hola.
como estas. soy novato entre novatos..
pero necesito lo siguiente…haber si me puedes ayudar…
necesito informar un dato en una pagina web..
algo asi como: Sala 1 Ocupada… desde 11:00 a 12:00
Bueno…eso lo necesito mostrar en un smartv,,,,puede que necesite dos lineas…una para la sala 1 y otra para la sala 2…lo ideal seria poder darle formato a esas lineas…me refiero al tipo deletra y si se puede que se desplase tipo marquesina…..sera mucho?
Saludos
Soy novato entre novatos.
Necesito mostrar en una pagina una entrada que va a cambiar de acuerdo a los eventos que se completen:
“Sala 1 ocupada hasta las 11:00”
“sala 2 disponible”
Como se puede hacer eso…donde ingreso la información para actualizar la pagina… puede ser tipo marquesina?
Favor de ayudar…Help-
buen aporte mil gracias me ha servido de mucho solo tengo una pregunta quisiera usar los sweetalerts pero no me responden me podrias ayudar como utilizarlo tengo una tabla de la cual quiero eliminar un registro con sweet alert ya me funciona y todo pero al utilizar tu post no me lo jala este codigo lo estoy utilizando en div1.php
0):?>
Archivo
Fecha – Hora
title; ?>
src; ?>
created_at; ?>
<a class="btn btn-success btn-xs" href="folder.$img->src; ?>” data-toggle=”tooltip” title=”Descargar”>
<a class="btn btn-danger btn-xs eliminar" href="#" id="id; ?>” data-toggle=”tooltip” title=”Eliminar”>
<!– <a class="label label-danger" onclick="return confirmDelete();" href="./delete.php?id=id; ?>”>Eliminar –>
Bandeja vacia!
$(“.eliminar”).click(function(e){
e.preventDefault();
var id = $(this).attr(‘id’);
swal({
title: “¿Estás seguro?”,
text: “Será eliminado permanentemente!”,
type: “warning”,
showCancelButton: true,
confirmButtonColor: ‘#3085d6’,
//cancelButtonColor: ‘#d33’,
confirmButtonText: “Si, borralo!”,
cancelButtonText: “Cancelar”,
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
//Si SE confirma la eliminacion se ejecuta el reenvio al php encargado
window.location.href=”./delete.php?id=”+id;
} else {
//Si se cancela se emite un mensaje
swal(“Cancelado”, “Usted ha cancelado”, “error”);
}
});
});