cómo mostrar 'cargando' antes de cargar el contenido de las pestañas jquery

Question

Estoy usando las pestañas de la IU de jquery y el contenido cargado en la pestaña está en otra página. por lo que se carga a través de ajax. Hay un retraso entre la carga de la página durante la cual la parte de la pantalla donde se cargará el contenido de la pestaña está completamente vacía. ¿Hay alguna manera en que pueda mostrar algún mensaje como 'loading ....' hasta que se cargue el contenido?

Mi código es:

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

      <div id="tabs"> 
       <ul> 
        <li><a href="/failedPrescreenReport.jsp</a></li> 
        <li><a href="/failedverificationreport.jsp</a></li> 
        <li><a href="VerificationReport.action</a></li> 
       </ul> 
      </div> 

He intentado usar la opción spinner de este plugin, pero eso no parece funcionar para mí ... (tal vez mi css está en mal estado)

Answer 1

I recomendaría escuchar los eventos jquery ajaxStart, ajaxStop y ajaxError, mostrando su ventana emergente de "carga" en ajaxStart, ocultándola en AjaxStop y ajaxError. De esta manera, su ventana emergente de carga se mostrará siempre que una solicitud de Ajax esté pendiente sin ninguna programación adicional.

Por ejemplo:

$(function() { 
    $(this).ajaxStart(function() { 
    $("#ajaxLoading").show(); }); 
    $(this).ajaxStop(function() { 
    $("#ajaxLoading").hide(); }); 
}); 

Answer 2

acabo de escribir jquery plugin recientemente que podría ser útil. Coloca una máscara con un control giratorio sobre un elemento, por lo que para sus llamadas ajax puede mostrar la máscara antes de sus llamadas y desenmascararla en una función de devolución de llamada, por ejemplo.

Answer 3

El jquery blockui es perfecto para esto. Una solución muy rápida y elegante.

Answer 4

blockUI es genial, pero apostaría http://plugins.jquery.com/project/loading es una mejor opción para la situación.

Answer 5

No hay necesidad de hacer cosas adicionales, solo agrega span etiqueta inserta tus anclajes. Creo que se perdió en la documentación de jQuery.

ejemplo:

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li> 
     <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li> 
     <li><a href="VerificationReport.action"><span>Tab 3</span></a></li> 
    </ul> 
</div> 

lapso etiquetas son la parte importante.

Answer 6

mejor cosa que hice fue exactamente esto para pestañas ajax impulsado ... Espero que les encantará esta respuesta

$ ("# facilityTabContainer") pestañas ({panelTemplate:. "Cargando ..." , seleccionado: 0, desplazable: verdadero, caché: falso});

e incluso puede modificar panelTemplate en jquery.ui.tabs también para que todas las pestañas en su aplicación obtengan automáticamente la 'carga de texto o imagen'. y adivina qué es lo que también resuelve tu primer problema de carga de pestañas ...