Devolución de llamada después de ajax cargando una pestaña

Question

¿Cómo puedo aplicar algún código al contenido de una pestaña cargada de Ajax? Intenté usar $ (document) .ready dentro del contenido cargado, pero eso impidió que los estilos CSS se carguen (no sé por qué).

¿Hay una función de devolución de llamada? ¿Debo usar $ (document) .ready y styles dentro del documento cargado de alguna otra manera?

Si está usando $ (document) .ready dentro del documento cargado, ¿debería incluir referencias a jquery y sus complementos?

Answer 1

¿Ha probado el load event? Se debe invocar esto cuando el contenido de la pestaña se haya cargado.

En general, no debe tratar el elemento cargado como una página nueva y llamar al $ (documento) .ready. Esta no es una página nueva, sino algunos elementos nuevos añadidos al DOM. Todos los métodos ajax presentan un método de devolución de llamada que se invoca cuando los datos se cargan correctamente.

Answer 2

¿Qué código está utilizando para cargar el contenido a través de ajax? Si usa un comando jQuery como load o ajax, le recomendaría poner su código dentro de la función de devolución de llamada. Por ejemplo, usando load

$('#myUITab').load('anotherPage.html', function() { 

    // put the code you need to run when the load completes in here 

}); 

Answer 3

Otra manera de hacer esto es mediante el uso ajaxComplete:

$("#loading_comtainer").ajaxComplete(function(event,request, settings){ 
    alert("ajaxCompleted"); 
}); 

Answer 4

Usted puede utilizar el evento tabsload http://jqueryui.com/demos/tabs/#event-load

ver cómo se puede trabajar en el siguiente ejemplo:

$('#nav_tabs').tabs({ 
    select: function(event, ui){ 
     var url = $.data(ui.tab, 'load.tabs'); 
     if (url == '?ak=/account/logout') { 
      //exclude the logout from using ajax 
      location.href = url; 
      return false; 
     } 
     return true; 
    }, 
}).bind('tabsload',function(event, ui){ 
    alert('The tab is loaded. What now?'); 
}); 

Answer 5

jQuery Las "pestañas" de UI proporcionan un método de devolución de llamada. ¡Mira abajo!

$("#tabs").tabs({ 
    ajaxOptions: { 
     error: function(xhr, status, index, anchor) { 
      $(anchor.hash).html(
       "error occured while ajax loading."); 
     }, 
     success: function(xhr, status) { 
      //alert("ajax success. "); //your code 
     } 
    } 
});