Foros del Web » Programando para Internet » Javascript »

Como puedo hacer......

Estas en el tema de Como puedo hacer...... en el foro de Javascript en Foros del Web. Buenas tardes Me pueden colaborar con la siguiente duda por favor. Como hago para que mientras el sistema realiza un query, busqueda o consulta en ...
  #1 (permalink)  
Antiguo 15/09/2011, 18:49
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 4 meses
Puntos: 1
Como puedo hacer......

Buenas tardes

Me pueden colaborar con la siguiente duda por favor.

Como hago para que mientras el sistema realiza un query, busqueda o consulta en una base de datos en el lado del servidor, en el lado del cliente muestre una barrita en progreso, un reloj, o algo parecido, para que el usuario no piense que el sistema esta bloqueado. He visto muchas opciones en otros sitios pero no se como implementarlo en mi pagina.

La idea es que iniciar la consulta se active la barrita de progreso y al terminar la consulta del lado del servidor y la entregue al lado del cliente se desaparezca la barrita de progreso.

Por su colaboracion mil gracias

Isabel Ramirez.

Última edición por isabelramirezmontoya; 20/09/2011 a las 13:09
  #2 (permalink)  
Antiguo 20/09/2011, 13:17
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 4 meses
Puntos: 1
Respuesta: Como puedo hacer......

Auxilio

He intentado varias cosas pero aun sigo sin que me funcione como yo quiero.

Gracias por su tiempo

Isabel
  #3 (permalink)  
Antiguo 20/09/2011, 13:32
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 11 meses
Puntos: 528
Respuesta: Como puedo hacer......

Tienes que darnos detalles de qué forma llamas a la consulta.

A grandes rasgos, al ejecutar la consulta antes de llamar al proceso debes mostrar un gif de progreso.

Esto se puede hacer de varias formas:

1.Teniendo un div oculto con dicho gif y dándole propiedades de visible al querer mostrarlo,
2.Creando un nuevo div con el gif dentro.
3.Tendiendo un div vacío que al momento de mostrar el gif le coloque el html (innerHTML) del gif.

Lo importante es que tu consulta no sólo te devuelva los datos de la consulta, si no que también te devuelva una llamada javascript que oculte o elimine el div o quite el html del gif (según el método con el que lo hayas mostrado, ahora a la inversa).

En mi opinión, lo más sencillo es lo siguiente:
Si tu consulta es ajax y te devuelve los resultados en un div en concreto, antes de llamar la consulta colocas en dicho div el html del gif, algo sí como:

document.getElementById('mi_div').innerHTML='<img src="reloj.gif">';

Luego, cuando tu proceso realice la consulta y te devuelva el resultado en el div, solito borrará el gif del reloj y lo sustituirá por el resultado de la consulta.
  #4 (permalink)  
Antiguo 20/09/2011, 17:26
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 4 meses
Puntos: 1
Respuesta: Como puedo hacer......

ocp001a, gracias por tu colaboracion

Entiendo lo que me dices pero no se como hacerlo, la verdad es que apenas estoy aprendiendo este cuento de la programacion.

Cuando hago la consulta la funcion se activa, pero cuando la consulta llega no se como quitar la funcion, la funcion sigue funcionando y la consulta queda sobre o debajo de la funcion.

El codigo HTML que estoy intentando es el siguiente:

<html>
<head>

<script language="javascript" src="xp_progress.js"></script>

<style type="text/css">

table.tabla1
{
margin-top: 300px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 400px;
border: 0px solid green;
width: 200px;
height: 40px;
}

td.td1
{
text-align: center;
font-weight: regular;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
height: 20px;
background-color:#FFFFFF;
color:#008000;
}

</style>

</head>

<body>

<script>

function procesando(id){
mostrado=0;
elem = document.getElementById(id);
if(elem.style.display=='block')mostrado=1;
elem.style.display='none';
if(mostrado!=1)elem.style.display='block';
}

</script>

<div id="tabla1" style="display: none">

<table class="tabla1" cellpadding="0" cellspacing="5">
<tr>
<td class="td1" align="center">
<script type="text/javascript">
var bar=createBar(150,15,"white",1,"black","#333366",8 5,7,3,"");
</script>
</td>
</tr>
<tr>
<td class="td1" align="center">Procesando....</td>
</tr>
</table>

</div>

<script>
procesando('tabla1')
</script>

<table>

<?
$host="ABC";
$user="ABC";
$password="ABC";
$db="foro1";

$connect=mysql_connect($host,$user,$password);
mysql_select_db("foro1",$connect);
$consulta = mysql_query("select direccion, nombre, fecha from libreta order by direccion asc",$connect);
$lado=mysql_num_rows($consulta);

while($row = mysql_fetch_array($consulta)) {

echo '<tr><td><p><b>Nombre:</b>'.$row["nombre"].'</p></td><td><p><b>Direccion:</b>'.$row["direccion"].'</p></td><td><p><b>Fecha:</b>'.$row["fecha"].'</p></td></tr>';

}

mysql_free_result($consulta);

mysql_close();

?>

</body>
</html>

El codigo JAVASCRIPT que estoy usando es el siguiente:


var w3c=(document.getElementById)?true:false;
var ie=(document.all)?true:false;
var N=-1;

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,coun t,action){
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
for(i=0;i<blocks;i++){
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N);
bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N);
bA.blocks=blocks;
bA.N=N;
bA.w=w;
bA.h=h;
bA.speed=speed;
bA.ctr=0;
bA.count=count;
bA.action=action;
bA.togglePause=togglePause;
bA.showBar=function(){
this.bar.style.visibility="visible";
}
bA.hideBar=function(){
this.bar.style.visibility="hidden";
}
bA.tid=setInterval('startBar('+N+')',speed);
return bA;
}}

function startBar(bn){
var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn);
if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){
t.style.left=-(t.h*2+1)+'px';
t.ctr++;
if(t.ctr>=t.count){
eval(t.action);
t.ctr=0;
}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';
}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.s peed);
}else{
clearInterval(this.tid);
this.tid=0;
}}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.s peed);
}else{
clearInterval(this.tid);
this.tid=0;
}}


Cualquier colaboracion, comentario o sugerencia mil gracias.

Isabel Ramirez
  #5 (permalink)  
Antiguo 21/09/2011, 00:23
 
Fecha de Ingreso: septiembre-2011
Mensajes: 1
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Como puedo hacer......

Bueno primero que nada deberias especificar un poquito mas lo que quieres hacer.

quieres cargar datos en una tabla ?, que tipo de consulta es .., bueno para ese tipo de cosas se usa AJAX,

Por que AJAX, simple. Javascript funciona del lado del cliente cuando el cliente haga la consulta, toda la pagina se refrescara y por ende tu "gif de reloj" no servira para nada. con AJAX basicamente las peticiones realizadas por el navegador son transparentes al usuario OSEA la pagina no se refresca, de esta manera puedes hacer lo que te plasca con los elementos que tienes en tu pagina.

Un consejo, utiliza un framework de desarrollo y mejor si estas empezando. Te recomiendo MOOTOOLS, el mas popular es JQUERY .. pero MOOTOOLS es la NETA xD

Aqui te dejo un pequeño ejemplo de como podrias hacer lo que deseas usando JS. Mootools




var query= new Request({

url: 'modelo-consulta-sql.php',

onRequest: function(){
$('divQueContendraDatos').set('html',"<img src='img-reloj.gif' /> ");
},

onSuccess: function(responseText){
$('divQueContendraDatos').set('html',responseText) ;
}


});


$('botonQueHaceConsulta').addEvent('click',functio n(){
query.send("nombre="+$('txtNombre').get('value') );
});

Última edición por developerg; 21/09/2011 a las 00:29
  #6 (permalink)  
Antiguo 27/09/2011, 17:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 4 meses
Puntos: 1
Respuesta: Como puedo hacer......

Developerg, gracias tu colaboracion.

Lo que tu me dices seria lo ideal, hacerlo a traves de AJAX, para que unicamente actualice parte de la pagina y no toda la pagina, sin embargo yo soy un DUMMIS en esto de programacion, y por lo que he estado mirando AJAX es un poco complejo para mi que apenas estoy aprendiendo html, php y algo de javascript.

EL ejemplo que me colocaste me dejo totalmente perdida. Disculpa mi ignorancia.

Gracias

Isabel Ramirez

Etiquetas: html, php
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 16:51.