Preloader en AJAX

mixzplit · #1 (**permalink**) 26/09/2011, 08:26

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>&nbsp;&nbsp;&nbsp;&nbsp;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

mixzplit · #2 (**permalink**) 26/09/2011, 08:39

Me respondo inmediatamente, no se que pasaba, pero comente estas lineas

Código Javascript:

Ver originalelse 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";*/
    }

Y me funciono todo bien, no se xq antes no me funcionaba, me disculpo por haber creado este Post,

Saludos

mixzplit · #3 (**permalink**) 28/09/2011, 21:06

Buenas noches, con respecto al codigo que coloque anteriormente ya me funciona correctamente, pero por alguna extraña razon que no he logrado resolver, la imagen de precarga me sale pegada hacia la izquierda de la pagina y no debajo de la palabra cargando que es como quiero.

Espero puedan ayudarme

Saludos

chichote · #4 (**permalink**) 29/09/2011, 05:45

mixzplit utilizas algun debugger? sino lo utilizas te lo recomiendo, te ayudará muchisimo y te ahorrara mucho tiempo.

Saludos

mixzplit · #5 (**permalink**) 29/09/2011, 05:49

Hola Cherivera, gracias por tu respuesta, en realidad no estoy usando un debugger, programo sobre dreamweaver y no lo manejo al 100% no se si este tendra un debugger interno, pero gracias por el comentario

Saludos

chichote · #6 (**permalink**) 29/09/2011, 11:10

para debuguear js te basta con firebug de firefox, tambien pudes instalarlo a chrome y otra opcion es el entorno de desarrollo el IE.

Saludos