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

Preloader en AJAX

Estas en el tema de Preloader en AJAX en el foro de Frameworks JS en Foros del Web. 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 { ...
  #1 (permalink)  
Antiguo 26/09/2011, 08:26
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 11 meses
Puntos: 2
Preloader en AJAX

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 original
  1. function showUser(str)
  2. {
  3. if (str=="")
  4.   {
  5.   document.getElementById("txtHint").innerHTML="";
  6.   return;
  7.   }
  8. if (window.XMLHttpRequest)
  9.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else
  13.   {// code for IE6, IE5
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. xmlhttp.onreadystatechange=function()
  17.   {
  18.   if (xmlhttp.readystate==1){
  19.     document.getElementById("preloader").innerHTML = "Cargando...";
  20.     //modificamos el estilo de la div, mostrando una imagen de fondo
  21.     document.getElementById("preloader").style.background = "url('anim.gif') no-repeat";
  22.   }
  23.   else if (xmlhttp.readyState==4 && xmlhttp.status==200)
  24.     {
  25.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  26.     document.getElementById("preloader").innerHTML = "Cargado.";
  27.     document.getElementById("preloader").style.background = "url('anim.gif') no-repeat";
  28.     }
  29.   }
  30. xmlhttp.open("GET","vertareasemp.php?q="+str,true);
  31. xmlhttp.send();
  32. }

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
  #2 (permalink)  
Antiguo 26/09/2011, 08:39
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 11 meses
Puntos: 2
Respuesta: Preloader en AJAX

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

Código Javascript:
Ver original
  1. else if (xmlhttp.readyState==4 && xmlhttp.status==200)
  2.     {
  3.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  4.     /*document.getElementById("preloader").innerHTML = "Cargado.";
  5.     document.getElementById("preloader").style.background = "url('anim.gif') no-repeat";*/
  6.     }

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

Saludos
  #3 (permalink)  
Antiguo 28/09/2011, 21:06
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 11 meses
Puntos: 2
Respuesta: Preloader en AJAX

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
  #4 (permalink)  
Antiguo 29/09/2011, 05:45
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 20 años
Puntos: 145
Respuesta: Preloader en AJAX

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

Saludos
__________________
http://chicho.ninja yiaaaa
  #5 (permalink)  
Antiguo 29/09/2011, 05:49
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 11 meses
Puntos: 2
Respuesta: Preloader en AJAX

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
  #6 (permalink)  
Antiguo 29/09/2011, 11:10
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 20 años
Puntos: 145
Respuesta: Preloader en AJAX

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
__________________
http://chicho.ninja yiaaaa

Etiquetas: ajax, php+ajax
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 04:16.