Hola gente, quiero poner un gif para cuando la pagina esta recargando, pero no me sale, intente poniéndolo dentro de una capa que desaparezca cuando el contenido de la grilla ya este cargado, pero no funciona, logro ver el gif, pero nunca desaparece y no me recarga la grilla. les paso el código con lo que le hice, a ver si alguien me da una mano...
muchas gracias desde ya...
saludos
function leerDatos(){
xmlDataSet=null;
if(oXML.readyState==1)
{
document.getElementById('capa1').style.visibility= "visible";
}
if (oXML.readyState == 4)
{
xmlDataSet = oXML.responseXML.documentElement;
cargarGrilla();
}
}
function cargarGrilla()
{
var tabla = '<table class="tabla"><tr>';
tabla+='<th width="5%" height="21" class="campoTexto">id</th>';
tabla+='<th width="20%" height="21" class="CampoTexto">Nombre</th></tr>';
for (i = 0; i < xmlDataSet.getElementsByTagName('lugar').length; i++)
{
var item = xmlDataSet.getElementsByTagName('lugar')[i];
var idGrilla=i
var id = item.getElementsByTagName('id')[0].firstChild.data;
var cell = item.getElementsByTagName('nombre')[0];
//tomo los valores del xml
if (cell.firstChild && cell.firstChild.data)
{
var nombre = item.getElementsByTagName('nombre')[0].firstChild.data
}
else
{
var nombre = '';
}
tabla = tabla + '<td class="tabla"><div id="div1" onclick="cargarCamposLugar('+ idGrilla + ')">' + id + '</div></td>';
tabla = tabla + '<td class="tabla">' + nombre + '</td>';
tabla=tabla + '</tr>'
}
tabla= tabla + '</table>';
document.getElementById('lista').innerHTML=tabla;
}
//actualiza la grilla desde la base de datos
function actualizarGrilla()
{
document.getElementById('capa1').style.visibility= "hidden";
var url="../index.php";
url=url+"?front=frontLugar&accion=listarlugar"
url=url+"&sid="+Math.random();
oXML.open("GET", url,false);
oXML.onreadystatechange = leerDatos;
oXML.send(null);
}
</script>
<link href="public/css/default.css" rel="stylesheet" type="text/css">
<!--Cuando carga la página carga la grilla-->
<body onload = "actualizarGrilla();">
<form name="lugar" id="lugar">
<div>
<table>
<tr>
<td width="60" height="21" valign="top" class="literalNegrita">Id:</td>
<td colspan="2" valign="top"><input class="campoTexto" type="text" name="id" id="id" value="" disabled size="5"></td>
</tr>
<tr>
<td height="21" valign="top">Nombre: </td>
<td colspan="2" valign="top"><input class="campoTexto" type="text" name="nombre" id="nombre" value=""></td>
<tr>
<td height="21" colspan="2">
<input class="boton" type="button" value="Ingresar" name="insertar" onClick="persistir_ingreso(lugar)">
<input class="boton" type="button" value="Modificar" name="modificar" onClick="persistir_modificacion(lugar)"></td>
</tr>
</table>
</div>
</form>
<form name="formLista">
<div class="grilla" id='lista'>
</div>
</form>
<div id="capa1" style="position:absolute;width:100;height:100;top: 45%;left:100"><img src='ajax-loader.gif' border='0' align='absmiddle'></div>
</body>
</html>
