Bloquear Pantalla al cargar datos

camarvi24 · #1 (**permalink**) 01/12/2011, 12:11

Hola a todos tengo que procesar un fichero de texto que tarda bastante, tengo dos formulario, el primero lo utilizo para que el usuario seleccione el fichero a procesar, este formulario tiene un boton que me manda a otro formulario que lo que hace es procesar el fichero de texto, lo lee y hace una serie de operaciones con cada linea, el problema que tengo es que este proceso tarda un poco sobre unos 15 o 20 segundos depende de las lineas del fichero, me gustaria mostar un mensaje de cargando o bloquear la ventana mientras se ejecuta este proceso, pero no tengo ni idea de como hacerlo.
Alguna sugerencia.
Gracias

truman_truman · #2 (**permalink**) 01/12/2011, 12:58

podría mostrar el codigo que llama al proceso para editar el archivo?

quedecosas · #3 (**permalink**) 01/12/2011, 13:14

Debes mandar el archivo con ajax, para de esta forma, mostrar un mensaje de carga mientras se procesa la petición, puedes usar jQuery Form, http://jquery.malsup.com/form/

ocp001a · #4 (**permalink**) 01/12/2011, 14:06

No necesariamente debe ser con ajax.
Puedes con javascript bloquear el botón de submit del formulario (lo más simple) o bien crear o mostrar un div que ocupe toda la ventana con un mensaje de espera. Dicho div se quitará solo en cuanto cambie de página, es decir cuando el proceso se complete.

camarvi24 · #5 (**permalink**) 05/12/2011, 09:17

Habia pensado en desactivar el boton que inicia el proceso, la idea del div me gusta como deberia de implementarlo ?

ocp001a · #6 (**permalink**) 05/12/2011, 16:02

Lo más simple es que tengas un div oculto (style="display:none") que contenga una barra de progreso, algo más o menos así:
<div id="bloquea" style="display:none;width:100%;height:100%;overflo w:hidden;z-index:10000">
<img src="barra.gif">
</div>

así tienes un div a pantalla completa por encima de los primeros 9999 divs o contenidos

cuando necesites cloquear la pantalla, simplemente mandas a mostrarlo, por ejemplo al hacer el submit:

<input type="submit" onclic="document.getElementById('bloquea').style.d isplay='block';">

camarvi24 · #7 (**permalink**) 13/12/2011, 12:11

El div oculto donde tengo que ponerlo, por que no me queda muy claro, os pongo el codigo de mi pagina

<body>

<div id="contenido">

<div id="principal">
<h2>Carga Automatica de Registros</h2>

<form id="generarperiodo" name="generarperiodo" action="procesafichero.php" method="POST" enctype="multipart/form-data" ONSUBMIT="return ventana('espera.php','wiwi','400','400','no');">
<fieldset>
<legend>Carga Datos</legend>
<div>
<label for="fichero">Fichero:</label>
<input type="file" id="fichero" name="archivo"/>
</div>
<div>
<input class="btn" type="submit" name="enviar" value="Procesar" onclick="document.getElementById('bloquea').style. display='block';"/>
<input name="action" type="hidden" value="upload" />
</div>
</fieldset>
</form>

</div>

</div>

</body>

iviamontes · #8 (**permalink**) 13/12/2011, 13:19

hola, bienvenido al foro,
el div oculto lo pones donde quieras, pq como tiene un z-index tan grande, al mostrarlo va a estar por encima de todos los elementos, dando la idea de que bloquear los demás

camarvi24 · #9 (**permalink**) 14/12/2011, 05:13

El problema que tengo es que el div no me bloquea toda la pantalla, cuando pulso el boton me muestra el gif que se carga en el div oculto, pero el resto de la pagina esta accesible y puedo por ejemplo pulsar de nuevo el boton, lo que quiero es poder bloquear toda la pantalla, de forma que se muestre una capa semitransparente encima de mi pagina, bloqueando esta

camarvi24 · #10 (**permalink**) 14/12/2011, 10:49

Ya he conseguido lo que necesita, os pongo el codigo para que lo veais.
Al final he conseguido que la pantalla se quede bloqueada con un div transparente que ocupa todo.

CSS

.cargando {

width: 100%;height: 100%;

overflow: hidden;

top: 0px;

left: 0px;

z-index: 10000;

text-align: center;

position:absolute;

background-color: #FFFFFF;

opacity:0.6;

filter:alpha(opacity=40);

}

html :

<div id="bloquea" class="cargando" style="display:none;">
<img style="margin-left: 5%;margin-top: 15%" alt="Espere..." src="imagenes/loading.gif" />

</div>