Porqué el cambio de la propiedad visibility no me responde???

[Laforge]

Hola a todos

Tengo una función (por cierto, bastante larga) para verificar los datos de una tabla y reordenarla en función de la columna elegida. Pues bién, como la tabla puede ser un poco extensa y la función tardaría un 'ratito' (3-5 segundos) quiero hacer aparecer un <DIV> con un mensaje tipo 'Ordenando tabla. espere' hasta que termine de ordenarla.

El código simplificado es este:

function Ordena(col, tabla) {
document.all.miDIV.style.visibility='visible'
//código para ordenar la tabla//
document.all.miDIV.style.visibility='hidden'
}

....pues....NO FUNCIONA. miDIV no se hace visible hasta que no ha terminado con la ordenación de la tabla. He intentado sacarlo fuera de la función llamando a la función de 'Ordena()' después de cambiar la propiedad a visible, pero tampoco me funciona. SIEMPRE LO HACE DESPUÉS DE ORDENAR LA TABLA. Cuál puede ser la causa??

Saludos

[atlante]

prueba usando document.getElementById() en vez de document.all.miDIV.

Saludos.

[Laforge]

Gracias por la respuesta pero ... no. Ya hice varias pruebas (inicialmente el código que tenía era con getElementById) pero no hay forma.

A mi me da la sensación que, usando el símil Visual Basic, sería necesario utilizar un 'DoEvents' después de cada cambio de visibilidad....

Alguna otra idea / sugerencia?

[JavierB]

Hola Laforge

Si tienes puesto un id al div: <div id="miDIV">

no deberías tener ningún problema para mostrarlo/ocultarlo con:

document.getElementById('miDIV').style.visibility= 'visible';

Saludos,

[Laforge]

Pues ... no va. Lo estoy diciendo desde el inicio...

el div lo tengo de la siguiente forma:

<div id='miDiv' style='width:300;height:200;background-color:white;border-color:FFC080;border-width:2;border-style:solid;font-family: Arial,sans-serif;font-weight:normal;font-size:8pt;position:absolute;left=350;top=250;visibi lity:hidden'><br>Ordenando tabla. Espere ...</div>

y la función (reitero) ....

function Ordena(col,tabla) {

document.getElementById('miDiv').style.visibility= 'visible'
//Código para ordenar la tabla//
document.getElementById('miDiv').style.visibility= 'hidden'
}

Si me limito a hacerla visible (y no la vuelvo a esconder), ésta aparece DESPUÉS de ordenar la tabla. Si ejecuto el código tal y como os he escrito, no llega a aparecer nunca porque como el div se hace visible DESPUÉS de ordenar la tabla y immediatamente después vuelve a haber un 'hidden'....

Si pongo 'paros' antes y después del código para ordenar la tabla...

document.getElementById('miDiv').style.visibility= 'visible'
alert('entro')
//Código para ordenar la tabla//
alert('salgo')
document.getElementById('miDiv').style.visibility= 'hidden'

... efectivamente, el DIV se hace visible antes de ordenar y desaparece después de ordenar. De todas formas, cuando le doy al 'aceptar' del alert('entro'), la caja de mensaje no me desaparece hasta que no me aparece el alert('salgo').

Como he dicho antes, parece como si le hiciera falta alguna instrucción tipo response.flush (de asp) o DoEvents (de VB).

El código para ordenar la tabla es un poco pesado (arrays que deben manejar una tabla de 100 y pico registros x 9 campos).

...alguna otra sugerencia?


SAludos

[derkenuke]

Pues sí que es curioso el tema, sí. Sólo he conseguido que parezca que funcione si retraso la funcion con un setTimeout:

Código PHP:

  <div id="pensando" style="width:400px; visibility:hidden;">Estoy pensando</div> 
<input type="button" value="crea y ordena" onclick="perifollo()" /> 
 
<script> 
 
function proc() { 
    var arr=new Array(); 
    for(var a=0;a<=5000;a++) 
        arr[a]=Math.random()*100; 
    arr.sort(); 
} 
 
function perifollo()  { 
    //alert("Comienzo perifollo, capa oculta"); 
    document.getElementById("pensando").style.visibility="visible"; 
    //alert("Debería estar visible, comienzo proc()"); 
    setTimeout("proc()",1); 
    //alert("Debería estar visible, proc() terminado"); 
    setTimeout(' document.getElementById("pensando").style.visibility="hidden" ', 1); 
    //alert("Fin de perifollo, capa oculta"); 
} 
 
</script>  
  

Sin los setTimeout no hay manera, incluso creando el setTimeout sólo para proc(). Si ponemos un alert sí que funciona, pero pierde la gracia.



Si la mostramos con perifollo() y la ocultamos en proc() también funciona:

Código PHP:

  <div id="pensando" style="width:400px; visibility:hidden;">Estoy pensando</div> 
<input type="button" value="crea y ordena" onclick="perifollo()" /> 
 
<script> 
 
function proc() { 
    var arr=new Array(); 
    for(var a=0;a<=5000;a++) 
        arr[a]=Math.random()*100; 
    arr.sort(); 
    //debo meterlo en otra función que esté retardada 
    document.getElementById("pensando").style.visibility="hidden" 
} 
 
function perifollo()  { 
    document.getElementById("pensando").style.visibility="visible"; 
    setTimeout("proc()",1); 
} 
 
</script>  
  

eso sí, la función proc() tiene que estar retardada también, si no no funciona.



Es probable que se trate de una optimización en el trabajo interno de javascript, no lo sé, pero no deja de ser molesto...

He probado bastantes cosas, incluso hacer una función aparte para cambiar el estado de la capa, y ni con esas. Si la función proc() y la orden de hacerlo hidden no están retardados (los dos) no he encontrado manera de hacerlo.

Las pruebas las he realizado en FF2, pero en IE auguro el mismo resultado...



Un saludo.

[Laforge]

Hola Darkenuke!

Al igual que algunos de los mayores descubrimientos de nuestros tiempos, llegamos a la vez a la misma conclusión (que, por cierto, muy bién expones en tu post. )

Al final, consideré que la solución más 'fina' era llamar a una función 'ShowAndSort' que me hace visible el DIV y ejecuta un setTimeOut a 500 milisegundos que llama la función de ordenar la tabla:

Código:

function ShowAndSort() {
	   document.getElementById('miDiv').style.visibility='visible'
	   window.setTimeout("Ordena()",500);
}

... y al final de la función de ordenación de tabla vuelvo a establecer la propiedad visibility del DIV a hidden y ya está.

Código:

function Ordena() {
              //Código para la ordenación de la tabla
              document.getElementById('miDiv').style.visibility='hidden'
}

Pero qué curioso verdad????

Habrá algún maestro JS que pueda responder a esta incógnita??


SAludos