Mostrar un div con opacidad

[juandedios]

Hola, tengo una página donde hay 2 divs, en la izquierda muestra el listado de una tabla y a la derecha un formulario para nuevos registros de esa tabla.

Cuando agrego un registro, muestra un mensaje y automáticamente de actualiza la tabla de la izquierda, todo eso me funciona bien, pero yo quiero hacerlo más profesional. Quiero que despues que aparesca el mensaje me aparezca un div con opacidad encima del div donde está el listado y con un icono de cargando al medio (esto mientras que el listado se actualiza automáticamente) y cuando ya mostró el registro creado que se retire ese div.

Como puedo hacer esto?.

[miktrv]

Ajax,

Te recomiendo Jquery para simplificar

saludos

[juandedios]

Claro, eso uso para guardar un nuevo registro y que se actualice el listado, pero lo que no logro hacer es que aparezca un div con opacidad y con un ícono de cargando encima de la lista mientras se actualiza.

[miktrv]

Pero no lo logras por tema de maquetación? o porque no sabes como controlar los eventos?

[juandedios]

creo que es por lo segundo.

[miktrv]

Pues tienes una serie de eventos en la api de Jquery:

Código Javascript:

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });
 

Simplemente tienes que hacer lo que necesites en cada evento.

Por ejemplo, beforeSend, muestro el loading, complete, oculto el loading y muestro el div.

[Alexis88]

También lo puedes hacer con los métodos ajaxStart y ajaxStop, así ya no tendrás la necesidad de indicar en cada llamada al método Ajax que se muestren y oculten el Div y Gif de carga. El primero de ellos, se activa cuando ocurre una petición asíncrona en el documento y el segundo, cuando se termina.

Código Javascript:

$(document).ajaxStart(function(){
    $("#DivCarga, #GifCarga").fadeIn(1000);
}).ajaxStop(function(){
    $("#DivCarga, #GifCarga").fadeOut(2000);
});
 

Así es como se ve (puedes cambiar los efectos a tu gusto): http://jsbin.com/UlAfazI/1

Saludos