2010-02-02 7 views
7

El escenario es como: estoy usando Jquery para implementar algunas funciones de Ajax. Por ejemplo: cuando un usuario hace clic en un botón "obtener datos", Jquery llamará a la función .ajax para recuperar algunos datos del servidor. Este proceso puede llevar algo de tiempo, así que agregué las funciones .ajaxSend y .ajaxComplete para mostrar algo de animación para el proceso de espera (en realidad, un gif 'Cargando datos' dentro de un div con índice z: 999 para estar arriba de otros divs dentro del) Durante el proceso de espera (el 'Cargando datos'), me gustaría evitar que los usuarios hagan clic en otros botones (por ejemplo: Tengo otras pestañas, botones debajo del pequeño gif 'Cargando datos'). La forma en que esto es logrado por:cómo evitar la interacción de los usuarios cuando se espera la respuesta de ajax

$("body").ajaxSend(function() 
    { 
     $(this).append('<div id="loading">Data Loading<\/div>'); 
     $("div#error").remove(); 
     $(this).children().not('#loading').css({'opacity':0.22}); 
    }); 
    $("body").ajaxComplete(function() 
    { 
     $("div#loading").remove(); 
     $(this).children().not('#loading').css({'opacity':1}); 
    }); 

Sin embargo, no creo que el cambio de la opacidad es la mejor manera. A menos que haga que la opacidad sea 0, los usuarios aún pueden hacer clic en otros botones/pestañas. No sé cómo evitar totalmente cualquier interacción del usuario durante este proceso? ¡¡Gracias!!

Respuesta

5
+0

en realidad, estoy usando JqueryUI también. Sí, acabo de probar la opción modal de diálogo. Es fácil lograr el efecto de bloque que quiero. Sin embargo, ¿hay alguna manera de eliminar el cruce (botón de cierre) en la esquina superior derecha del cuadro de diálogo? – WilliamLou

+0

Vea este http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog –

+0

gracias. Elegí esta como mi respuesta ya que ya utilicé JqueryUI para no tener que importar otro complemento solo para el efecto blockUI – WilliamLou

5

Hacer un div visible con un índice z por encima de cualquier otra cosa. onsucess, ocultarlo.

para IE6, tenga en cuenta la visibilidad de las entradas de selección

+0

Ojalá pudiera votar (pero estoy fuera por las próximas horas), especialmente para advertir IE6 y forma elementos. – Sampson

6

que he usado jQuery UI Bloquear con buenos resultados en el pasado. Funciona bien con el Ajax:

http://malsup.com/jquery/block/

puede valer la pena utilizar un plugin de este tipo, en lugar de handcoding una solución similar ...

+0

bueno, este complemento funciona bien para este propósito, pero no quiero importar demasiados complementos en esta etapa. Gracias de cualquier manera. Si no puedo encontrar una solución más fácil, puedo recurrir a BlockUI más tarde. – WilliamLou

0

Utilizo una variante en Ben Nadel's ajax pipeline. Básicamente, envuelve la llamada jQuery $ .ajax con un objeto que puede registrar solicitudes ajax salientes.

Cuando se cierra una solicitud de ajax, registra el nombre de la solicitud. Si alguna otra solicitud intenta salir con el mismo nombre, no la ejecute (proporcionando opcionalmente un mensaje al usuario).

0

Estaba tratando de obtener una respuesta a una pregunta similar y terminé aquí. Sé que es una vieja pregunta, pero me gustaría aclarar que una superposición sobre los elementos que desea evitar de la interacción puede eliminarse fácilmente a través del inspector del navegador.

Me parece que la mejor manera de abordar este asunto es configurar una variable booleana global para toda la página y simplemente ejecutar acciones en la página cuando ajax no se está ejecutando (al menos las acciones sensibles) o simplemente apagando la llamada asincrónica para ajax ya que de hecho en este escenario no parece necesitarlo (aunque sé que algunas personas me crucificarán por decir esto).

Cuestiones relacionadas