AJAX: Actualizacion Automatica.

[DianeWaldorf]

Hola! buen dia.. resulta que estoy desarrollando una pagina donde tengo un "muro" tipo facebook, donde se pueden hacer publicaciones, comentarios, calificar el comentario, ademas de que muestra la foto de usuario y el nombre con links respectivos a el perfil de cada usuario, el "asunto" es que necesito actualizar el div donde se encuentra el muro, para que los usuarios vean los comentarios en tiempo real. tengo el script que actualiza que es cada 10 segundos, pero si el usuario tarda mas de eso en escribir su mensaje.. el contenido se actualiza y el mensaje se borra.. este es el codigo que tengo.. alguna otra idea?

// Cambia estos parametros

var time = 10; // el tiempo en que se refresca
var div = "mostrar"; // el div que quieres actualizar!
var direction = "wall/consulta.php"; // el archivo que ira en el div
var varjy = "' . $visit . '";
var varjx = "' . $usu . '";

////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refresh(){

// 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 = direction+"?usu="+varjx+"&visit="+varjy+"&t="+time stamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(div).innerHTML=xmlHttp.res ponseText;
setTimeout('refresh()',time*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Empieza la función de refrescar

window.onload = function startrefresh(){

setTimeout('refresh()',time*1000);

}

[DianeWaldorf]

alguien? :<

[alexg88]

Si lo estás haciendo con ajax no debería borrarse el mensaje, es decir, tu tienes el muro de los mensajes y luego encima de este donde el usuario está introduciendo el mensaje. No se cual es el problema que tienes.

[DianeWaldorf]

como lo puse en el mensaje original, tengo el script que actualiza que es cada 10 segundos, pero si el usuario tarda mas de eso en escribir su mensaje.. el contenido se actualiza y el mensaje se borra..

el codigo que pegue esta incorrecto?
alguien sabe de algun otro metodo?

[alexg88]

Sólo muestras el código javascript, pero no como tienes hecha la estructura de la página. Como te decía en el anterior mensaje, si lo tuvieses bien estructurado no debería borrarse el mensaje que el usuario esté enviando, aunque refresques la página.

Pon el código HTML para ver como lo tienes hecho.

[DianeWaldorf]

yo pienso que el error debe estar en el archivo ajax no en el html..

[alexg88]

Sin ver completo el código no te puedo decir. Estoy casi seguro que el error está en el diseño de la web y no en el código.

[WeSoRz]

Yo diría que en el div tienes contenido el textarea y por eso al cargarlo desde el ajax, pierdes lo que había escrito.
Se me ocurren dos cosas:
1) Separar el textarea del contenido que se actualiza.
2) En el momento de tener el foco el textarea, que se detenga la función refresh asignando el setTimeOut a una variable y reiniciándola con clearInterval. Al perder el foco, volvería a tener intervalo.

[DianeWaldorf]

efectivamente, el textarea se encuentra dentro del div que se recarga pues está de ésta forma:

<div id="consulta"> <?php include("consulta.php"); ?> </div>

en el archivo consulta.php.. se encuentra un conjunto de consultas mysql, para seleccionar todos las publicaciones de un usuario, con los respectivos comentarios.

@WeSoRz: como podria implementar el setTimeOut?.. seria en el archivo donde esta el codigo que publique en mi primer mensaje verdad?

[WeSoRz]

Sí, sería en el que has publicado en el primer mensaje (es una de las opciones, vamos). Símplemente tendrías que asignar el timeout a una variable:

Código Javascript:

var refreshTimer = setTimeout('refresh()',time*1000);
 

Y luego en el evento onfocus del textarea:

Código Javascript:

clearInterval(refreshTimer);
 

En el evento onblur, habría que volver a poner el intervalo:

Código Javascript:

refreshTimer = setTimeout('refresh()',time*1000);
 

No lo he testeado, pero el concepto es ese :)

P.D. Pese a que las globales no son un buen hábito, en éste caso te recomiendo utilizar "refreshTimer" como variable global, así no tienes que declararla o redeclararla continuamente.

[DianeWaldorf]

Gracias! lo voy a probar.

[chipilofan]

Amigo creo que si casas tu textarea de consulta.php y lo pones de esta forma:

<textarea>Lo que sea</textarea>
<div id="consulta"> <?php include("consulta.php"); ?> </div>

No se borraria tu textarea por que creo que actualizas la parte del div consulta.

[alexg88]

Lo más sencillo sería sacar el textarea fuera del div general y te quitarías todos los problemas. Lo mejor es ir a lo sencillo y no complicarse la vida.

[DianeWaldorf]

@alexg88 & chipilofan:
Y que hay cuando el usuario quiere comentar una publicacion?.. esos textarea se encuentran dentro de consulta.php..

@chipilofan: no soy 'amigo'

[chipilofan]

Iniciado por DianeWaldorf

@alexg88 & chipilofan:
Y que hay cuando el usuario quiere comentar una publicacion?.. esos textarea se encuentran dentro de consulta.php..

@chipilofan: no soy 'amigo'

Solamente tendras el form fuera del consulta.php lo cual te evitara que se recarge tu formalario asi conseguiras que no se borre lo que han escrito.

Ok no somos amigos xD

[DianeWaldorf]

Gracias por tu respuesta, pero parece que no has entendido. Hasta luego!

Iniciado por chipilofan

Solamente tendras el form fuera del consulta.php lo cual te evitara que se recarge tu formalario asi conseguiras que no se borre lo que han escrito.

Ok no somos amigos xD

[WeSoRz]

Iniciado por chipilofan

Solamente tendras el form fuera del consulta.php lo cual te evitara que se recarge tu formalario asi conseguiras que no se borre lo que han escrito.

Ok no somos amigos xD

Pero por lo que se ve, no sé si por diseño o funcionalidad, requiere que el formulario sea enviado por ajax.

P.D. Lo de amigo no lo decía a malas me parece a mi, me da que es por razón de género ;)

[chipilofan]

Iniciado por WeSoRz

Pero por lo que se ve, no sé si por diseño o funcionalidad, requiere que el formulario sea enviado por ajax.

P.D. Lo de amigo no lo decía a malas me parece a mi, me da que es por razón de género ;)

Si ya lo entiendo, es cierto tienes razon necesitas enviar tu form a ajax.

Código HTML:

<form action="" 
onsubmit="EnviarDatos(); return false"> 

Y despues tendrias que div que lo actualiza, y recuerda el form debe estar fuera del div para que no se actualice tambien =)

[DianeWaldorf]

@chipilofan: Gracias por tu respuesta, pero no es asi :P

[carvaec]

Yo sí entiendo a DianeWaldorf
por que él llama en un div al archivo que contiene las Publicaciones, PERO, cada publicación necesita tener sus comentarios..

Osea él no puede sacar el TEXTAREA del div, por que en ese div él agarra datos como el id y demás para asignar ese comentario a su Publicación y así guardarlo en la base de Datos

Lo malo es que el div de Publicaciones se actualiza y el TEXTAREA por estar dentro, también se ve afectado...