Hola compañeros de foros del web, tengo el siguiente codigo
Código PHP:
<?php
session_start();
if(!isset($_SESSION['us_id'])){
header("Location: ../index.php");
} else {
$usuario=$_SESSION['us_id'];
$admin=$_SESSION['us_tipo'];
include_once("conexion.php");
include('./Scripts/funcion.php');
$conexion = new ControlBD();
$conexion->conectar();
$conexion->seleccionarBD();
$query2="select * from cgempresa";
$result2=$conexion->ejecutarQuery($query2);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="./Scripts/imprimir.js"></script>
<script type="text/javascript" src="./Scripts/jquery-1.6.1.js"></script>
<script type="text/javascript" src="accion.js"></script>
<script type="text/javascript" src="./Scripts/jquery.uniform.js"charset="utf-8"></script>
<link rel=stylesheet href="./Style/uniform.default.css" type="text/css">
<link rel=stylesheet href="./Style/default.css" type="text/css">
<link rel=stylesheet href="./Style/menuH.css" type="text/css">
</head>
<script type="text/javascript">
$(function(){
$("input, textarea, select, button").uniform();
});
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","vertareasemp.php?q="+str,true);
xmlhttp.send();
}
var resumen= "";
var visible= -1;
var i= "";
function mostrar(obj, indice, d)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(visible != -1)
document.getElementById('celda'+visible).innerHTML= resumen+" <a href=\"#\" onclick=\"mostrar('celda"+visible+"', "+visible+", "+i+")\">[...]</a>";
resumen= document.getElementById(obj).childNodes[0].nodeValue;
visible= indice;
i = d;
document.getElementById(obj).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "vertareasemp_2.php?ind="+indice+"&id="+d, true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
include('menu.php');
?>
<form>
<div class="centrado">
<table width="355" height="155" class="backgroundRecurso" id="tablas">
<tr>
<th><br> Empresa/Proyecto</th>
<td><br><select name="empresa" id="empresa" onchange="showUser(this.value)">
<option value="0">--- Seleccione ---</option>
<? while($array2=mysql_fetch_array($result2)) {?>
<option value="<?=$array2['em_id']; ?>"><?=$array2['em_nombre']; ?></option>
<? } ?></select></td>
</tr>
</table>
</div>
<br />
<div id="txtHint" class="centrado"><b>Mostrando</b></div>
<div id="preloader">Este es el preloader</div>
</form>
</body>
</html>
<? } ?>
Este Codigo me da como respuesta una tabla con los datos dependiendo de lo que se selecciono en SELECT, esto es con AJAX, me da la respuesta sin recargar la pagina, ahora bien, en la parte del codigo AJAX, en la funcion ShowUser, quisiera ponerle un preloader, unaa imagen gif que me diga q se estan cargando los datos, lo coloque de esta manera
Código Javascript
:
Ver originalfunction showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readystate==1){
document.getElementById("preloader").innerHTML = "Cargando...";
//modificamos el estilo de la div, mostrando una imagen de fondo
document.getElementById("preloader").style.background = "url('anim.gif') no-repeat";
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
document.getElementById("preloader").innerHTML = "Cargado.";
document.getElementById("preloader").style.background = "url('anim.gif') no-repeat";
}
}
xmlhttp.open("GET","vertareasemp.php?q="+str,true);
xmlhttp.send();
}
Pero no me sale el gif cargando antes de mostrar los datos, me los muestra despues de cargado los datos y no deberia ser asi, de verda no se que pasa con el codigo, no veo la falla.
Espero puedan ayudarme ya que no doy con la solucion, he probado varios codigo que he visto en la web y en los foros pero no me funcionan
Bueno saludos y gracias de antemano