Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Implementar loader en función

Estas en el tema de Implementar loader en función en el foro de Frameworks JS en Foros del Web. Que tal Maestros, he aquí mi stiución: Desde hace algún tiempo utilizo una función para cargar mediante AJAX el contenido de archivos externos en una ...
  #1 (permalink)  
Antiguo 12/08/2011, 19:41
 
Fecha de Ingreso: enero-2002
Mensajes: 4.159
Antigüedad: 22 años, 10 meses
Puntos: 22
Implementar loader en función

Que tal Maestros, he aquí mi stiución:

Desde hace algún tiempo utilizo una función para cargar mediante AJAX el contenido de archivos externos en una página, a continuación pongo la función por si a alguien le es útil:

Por favor, prestar especial atención a la parte en negritas.


Cita:
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}

}

XMLHttpRequestObject.send(null);
}
}

Para llamar a la función se usa la siguiente sintaxis:

Cita:
evento="getData( 'archivo_solicitado.txt', 'id_del_div')"

evento= El evento que lanzará la función (onClick, onBlur etc) dependiento del tipo de campo.

archivo_solicitado.txt = Pues es el archivo que traeremos del servidor

id_del_div = Id de la etiqueta <div></div> dentro de la cual se pondrá el contenido del archivo solicitado
La función trabaja a la perfección, el problema vino cuando intenté modificar la función para hacer que aparezca una imágen (loader) en lo que se termina de recibir el archivo, después de devanarme los sesos por un rato, la mejor sulución que encontré fué la siguiente (lo que está en negritas es lo que agregué):

Cita:
.
.
.
.
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}else{
obj.innerHTML = "<img src='bigrotation2.gif' border='0' align='absmiddle'>";
}

.
.
.


La función trabaja bien la primera vez que se usa, pero si por ejemplo, el archivo que llamó la función tiene un campo de formulario que vuelve a llamar a la función, entonces ya sólo aparace la imagen y nunca el contenido del nuevo archivo que se está solicitando.

No sé si me expliqué bién, la verdad los lenguajes del lado del navegador no son mi fuerte, agradezco desde ahora cualquier ayuda, si necesitan mas información o cualquier aclaración sobre el problema por favor no duden en solicitármelo.

Desde ahora muchas grácias.

Saludos todos.
  #2 (permalink)  
Antiguo 12/08/2011, 22:01
 
Fecha de Ingreso: enero-2002
Mensajes: 4.159
Antigüedad: 22 años, 10 meses
Puntos: 22
Solucionado

QUe tal maestros, bastó agregar la línea que se muestra en negritas para que el preloader funcione adecuadamente, aquí les dejo la función probada y funcionando:

Cita:
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
obj.innerHTML = "<center><p><p><p><img src='bigrotation2.gif' border='0' align='absmiddle'></center>";
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}

Saludos.

Etiquetas: ajax, contenido, implementar, loader, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:33.