se puede hacer loading para espera de ejecucion Procedimiento Almacenado?

[sagitariosTheBest]

Hola buenas tardes, reciban un saludo todos lo que forman esta comunidad.

aqui con la siguiente pregunta.

Hay manera de hacer un "loading". en la espera de que se termine de ejecutar un procedimiento almacenado(mssql)?

Cuando ejecuto un procedimiento con PHP, me gustaria que que apareciera una leyenda que diga "cargando", o una barra de progreso, lo que sea, la finalidad es que el usuario sepa que se esta cargando la informacion. y de esta manera no se desespere y vuelva a pinchar el boton.

Por que asi como lo tengo no se sabe, y es muy problable que vuelvan a pinchar el boton.

yo habia considerado JavaScript con el objeto window. escrito de la siguiente manera.

Código PHP:

   
window.onload=function(){
document.getElementById("contenido").style.visibility="visible";
document.getElementById("loading").style.display="none";
} 
   

donde el contenedor "loading" contiene la leyenda "cargando". pero resulta que funciona con consultas tardadas donde aun no se termina de cargar la pagina. y en procedimientos mas cortos. no aparece el "cargando" y a qui se queda un rato en blanco y despues aparece el resultado.


hay alguna forma de hacer lo que les pregunto???.
muchas gracias anticipadas

[Marvin]

Podrias hacerlo siempre y cuando el procedimiento cargue un arreglo y tengas el numero de elementos a cargar...

Por ahi podrias hacer un bucle hasta que la cantidad de registros del arreglo sea igual al numero de elementos a cargar y mientras eso no pase te muestre "Cargando"

Desconozco si existe algo ya creado para esto, pero podria ser efectivo crearse algo asi

Suerte!

[gusma62]

Puedes usar AJAX, que viene siendo una mezcla entre javascript y php, una combinación potente.

[sagitariosTheBest]

si el resultado lo cargo en un array llamado $row de la siguiente manera.

Código PHP:

  $result=mssql_execute($stmt);
//cargo el resultado en un arreglo
$row=mssql_fetch_row($result) 
   

pero si pongo un while. me imprimiria muchas veces no?
o de que manera lo puedo hacer?.

algo asi??
si lo hago un cilco me imprimiria "cargando " segun el numero de elementos del array.


cual seria la mejor forma con el ciclo?
bueno esta mal escrito el codigo pero lo escribi de rapidito

Código PHP:

  while($row == 7){
echo "cargando";
} 
   

En cuanto a AJAX no sabria como hacerle.
me podrias hechar una mano??

muchas gracias por responder

[Marvin]

Si fuera en php tendrias que hacer algo como esto:

Código PHP:

  $result=mssql_execute($stmt);
//aca se van a cargar los datos asi que mostramos el loading...
echo '<script language="Javascript">
document.getElementById("contenido").style.display="none"; 
document.getElementById("loading").style.display="block"; 
</script>';
while($row=mssql_fetch_row($result)){
    //cargas los datos...
}
//aca ya se cargo todo y mostramos el contenido
echo '<script language="Javascript">
document.getElementById("contenido").style.display="block"; 
document.getElementById("loading").style.display="none"; 
</script>'; 
   

Si esto lo tienes asociado en un solo arreglo y no haces un while... puedes ponerlo de esta manera:

Código PHP:

  $result=mssql_execute($stmt); 
echo '<script language="Javascript">
document.getElementById("contenido").style.display="none"; 
document.getElementById("loading").style.display="block"; 
</script>';
$row=mssql_fetch_row($result);
echo '<script language="Javascript">
document.getElementById("contenido").style.display="block"; 
document.getElementById("loading").style.display="none"; 
</script>'; 
   

Por el lado de ajax puedes hacer algo como esto:

Código PHP:

  //archivo que pide la informacion
<script language="Javascript" type="text/javascript">
<!--
var http = crearAjax();
function crearAjax(){
    var xmlhttp = false;
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch (e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (E){
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
function getInfo(){
    var url = "paginaQEntregaDatos.php";
    http.open("GET", url, true);
    http.onreadystatechange = function(){
        if (http.readyState == 1){ /* TODAVIA NO SE ENTREGAN LOS DATOS*/
            document.getElementById("contenido").style.display="none"; 
            document.getElementById("loading").style.display="block"; 
        }
        if (http.readyState == 4){ //DATOS ENTREGADOS
            document.getElementById("contenido").style.display="block"; 
            document.getElementById("loading").style.display="none"; 
        }
    }
    http.send(null);
}
-->
</script> 
  

Código PHP:

  //archivo que entrega la informacion
function getData(){
    $result=mssql_execute($stmt);  
    $row=mssql_fetch_row($result);
    return $row;
}
$arrResp = getData();
return ''.json_encode($arrResp).''; 
   

Esto ultimo eso si implica un poco mas de trabajo en terminos de mostrar tus datos...

Suerte!

[sagitariosTheBest]

que maravilla muchas gracias marvin justo lo que buscaba

[sagitariosTheBest]

Hola de nuevo yo. les expongo mi codigo haber si algo tengo mal. lo quepasa que el codigo que me dejo marvin me suena logico solo que no se si lo estoy implementando bien.

Lo que pasa es que las funciones getElementById son funciones de DOM y se ejecutan hasta que se carga toda la pagina segun tengo entendido. el detalle que cuando ejecuto el procedimeinto almacenado desde mi pagina se ve como que esta cargada la pagina y no aparece el "loading".

La vedad es que los procedimiento tienen consultas no se si sea los mas optimo, bueno ese no es el punto. alguien me puede hechar de nuevo la mano en ver que es lo que esta pasando.??

Código PHP:

  
<!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=utf-8" />
<title></title>
<script  type="text/javascript" src="js/ie6menu.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
 
<div id="cargando"> 
     <div align="center">
        <img src="imagenes/cargando.gif" />  
        <p><strong>Cargando informacion...</strong></p>
     </div>
</div>
 
 
<div id="wrapper">
 
     <div id="head">
     </div>
 
 
<!--Contenedor menu principal-->
<div id="contentMenu" class="float" >
 
   
   <div id="$">
     <?php
       $var=$_SESSION['aaaa'];
       echo "<img src=\"aaaaa/$var.jpg\"/>";
     ?>       
    </div>
    
       
    <div id="#">               
            <p>
              <b>aaaaaa:</b>
              <?=$_SESSION["aaaaa"]." ".$_SESSION["aa"]." ".$_SESSION["aa"]?>
            </p>               
            
            <p>
              <b>aaaaaa:</b>
              <?=$_SESSION["aaaaaa"]?>
            </p>                    
            
            <p>
               <b>aaaaaa:</b>
               <?=$_SESSION["aaaaaa"]?>
           </p>                         
            
            <p>
            <b>aaaaaa:</b>
            <?=date("aaaaaa");?>            
            </p>
      </div>
              
          <!--Estructura menu con ul-->
<ul id="nav" class="menu">
            
            <li><a href="#">safdsfsdf</a>
                 <ul>
                     <li ><a href="#">sasasasas</a></li>
                     <li><a href="#">sdfgsdfgs</a></li>
                 </ul>
            </li>
            
            <li><a href="#">aaaaaa</a>
               <ul>
                   <li><a href="#">aaaaaa/a></li>
                   <li><a href="#">aaaaaa</a></li>            
                   <li><a href="#">aaaaaa</a></li>            
              </ul>
            </li>
            
            <li><a href="#">aaaaaa</a>
               <ul>
                 <li><a href="#">aaaaaa</a></li>
                   <li><a href="#">aaaaaa</a></li>            
              </ul>
            </li>    
            
            <li><a href="#">aaaaa</a>
               <ul>
                   <li><a href="#">aaaaaa</a></li>
                   <li><a href="#">aaaaa</a></li>            
              </ul>
            </li>                                                        
            
            <li><a href="#">aaaaaa</a>
               <ul>
                   <li><a href="#">aaaaaa</a></li>            
              </ul>
            </li>
            
            <li><a href="#">aaaaaa</a>
               <ul>
                   <li><a href="#">aaaaaa</a></li>
                   <li><a href="#">aaaaaa</a></li>                        
              </ul>
            </li>
            
            
            <li><a href="#">aaaaaa</a>
               <ul>
                   <li><a href="#">aaaaaa</a></li>   
              </ul>
            </li>
            
          
            
            <li><a href="#">aaaaaa</a></li>           
            <li><a href="#">aaaaaa</a></li>                
    </ul>   
</div>
    
<!--contenedor-->
<div id="contenido" class="float" >
 
    <h4></h4>
    <form method="post">
    
       <fieldset>
               <legend>
               aaaaaaaaaaaaaaaa  
               </legend>
               
               <label>Fecha: </label>               
               <input type="text" name="funo" />               
               <input type="submit" value="Procesar" class="boton" />
               <a href="#">Salir</a>
        </fieldset>
    </form>
 
<?php
include("#");
include("#");
$suser=$_SESSION['user'];
 
    
    //inizializa procedimiento
    $stmt=mssql_init("procedimiento",$conn);
 
     //enviando parametros al procedimiento
               mssql_bind($stmt, '@Fecha', &$funo, SQLVARCHAR,false,false,60);
    mssql_bind($stmt,'@valor',&$valor,SQLCHAR,false,false,60);
     
    // Ejecutamos procedimiento almacenado
    $result=mssql_execute($stmt);
    $row = mssql_fetch_row($result);    
 
    echo '<script  type="text/javascript" >
   document.getElementById(\'cargando\').style.display="block";
    document.getElementById(\'contenido\').style.display="none";
       </script>';
    
 
    
  //Definimos los colores a usar
    $color0 = "#CCCCCC";//#A4B4C1 cabecera    
    $color1 = "#DED";//Linea1
    $color2 = "#FFF";//#E8F2FC Linea2
    $color3 = "#E5ECF9";#E0FAC5//sobre tabla
    $color = $color1;
    
    //creamos la tabla
    echo "<table align=\"center\" >";    
    
    echo "<tr bgcolor='$color0'>        
    <th>aaaaa</th>
    <th>aaaaaa</th>
    <th>aaaaaaa</th>
    <th>aaaaaaaa</th>
    <th>aaaaaaa</th>
    <th>aaaaaaa</th>
    <th>aaaaa</th></tr>";
 
    do {
    //creamos el java y imprimimos resultado
    echo " <tr 
    align=\"center\"
    style=\"background-color:$color\"
    onMouseOver=\"this.style.backgroundColor='$color3'\"                                                       onMouseOut=\"this.style.backgroundColor='$color'\" >";
    
    echo "<td>".$row[0] . "</td>";
    echo "<td>".$row[1] . "</td>";
    echo "<td>".$row[2] . "</td>";
    echo "<td>".$row[3] . "</td>";
    echo "<td>".$row[4] . "</td>";
    echo "<td>".$row[5] . "</td>";
    echo "<td>".$row[6] . "</td>";
    echo "</tr>";
    
    //diferenciamos los colores de las filas
    if ($color == $color1) {
        
        $color = $color2;
        } else {
        $color = $color1;
        }
    }
    while ($row = mssql_fetch_row($result));    
    echo "</table>" ;
 
    echo '<script  type="text/javascript" >
    document.getElementById(\'contenido\').style.display="block";
    document.getElementById(\'cargando\').style.display="none";
       </script>';
    
 
    
    // liberando procedimiento,resultado y conexion
    mssql_free_statement($stmt);
    mssql_free_result($query);
    mssql_close($conn);    
    ?>
 
  <!--Fin de div contenido-->
</div>
     
    
    
    <div class="clear"></div> 
    <div id="push"></div>
</div><!--Fin del wrapper-->
 
 
 
<!--Footer-->
<div id="footer">
 
 <p id="condiciones">
 <a href="#">aaaaaaaaaaaaaaaaa</a> | <a href="#">aaaaaaaaaaaaaaaaaa</a>
 </p>
 
</div>
 
 
</body>  

[Marvin]

Consulta... la clase float esta definida con display:none?

Porque esto:

Código HTML:

<div id="contenido" class="float" > 

Dice que se muestre siempre...
Algo que podria ser asi en un principio:

Código HTML:

<div id="contenido" class="float" style="display:none"> 

Saludos!

[sagitariosTheBest]

Es que el detalle que mi diseño es de 2 columnas. y las acomedo con el float:left


mmmm. a menos que le coloque otro div dentro de contenido y a ese no le ponga float...

[sagitariosTheBest]

Listo ya quedo marvin muchas gracias por orientarme, ahora si quedo como queria.
saludos

[Marvin]

;) Excelente!

Igual trata de poner el codigo por si alguien mas lo necesita.

Saludos!

[sagitariosTheBest]

Quedo Igual solo que le agreque un div mas.

<div id="content">
</div>

y a este no le puse el float que me comentabas ya ves que siembre se mostraba.
la clase float solo tiene float:left

y al id="content" le doy un display:none. y con eso quedo bien.