2009-04-11 16 views
5

Wie kann ich etwas Code auf den Inhalt einer Ajax geladenen Registerkarte anwenden? Ich habe versucht, $ (Dokument) .ready in den geladenen Inhalt, aber das verhindert Css Stile laden (weiß nicht warum).Rückruf nach Ajax Laden einer Registerkarte

Gibt es eine Rückruffunktion? Soll ich $ .ready und Styles im geladenen Dokument auf andere Weise verwenden?

Wenn $ (document) .ready im geladenen Dokument in Ordnung ist, sollte ich auch Referenzen zu jquery und seinen Plugins darin aufnehmen?

Antwort

8

Haben Sie die load event versucht? Dies sollte aufgerufen werden, wenn der Inhalt der Registerkarte geladen wurde.

Im Allgemeinen sollten Sie das geladene Element nicht als neue Seite behandeln und $ (document) .ready aufrufen. Dies ist keine neue Seite, aber einige neue Elemente wurden dem DOM hinzugefügt. Alle Ajax-Methoden verfügen über eine Rückrufmethode, die aufgerufen wird, wenn die Daten erfolgreich geladen wurden.

+0

Das load-Ereignis wird auf jede Registerkarte angewendet, sollte ich dieses Ereignis verwenden und die ausgewählte Registerkarte darin abrufen, um den neuen Code anzuwenden? Jede Registerkarte enthält ein anderes DOM, z. B. Tabellen oder Formulare. – Gerardo

+0

Ich habe die Veranstaltung nicht selbst genutzt. Sehen Sie, ob Sie die Registerkarte aus dem Ereignis- oder dem ui-Parameter laden können, der an die Callback-Methode übergeben wird. Leider erklärt die Dokumentation diese Parameter nicht. Das Verwenden des DOM der Registerkarten funktioniert, aber es ist eine "schmutzige" Lösung. – kgiannakakis

+0

Konventionen folgend, würde ich mir vorstellen, dass event.target.id die ID der Registerkarte ist, in die Inhalt geladen wurde. Verwenden Sie firebug und console.log zum Untersuchen :) –

5

Welchen Code verwenden Sie, um den Inhalt über Ajax zu laden? Wenn Sie einen jQuery-Befehl wie load oder ajax verwenden, würde ich empfehlen, Ihren Code in die Callback-Funktion zu setzen. Zum Beispiel mit load

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

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

}); 
+0

Ich bin mit einer Methode tab: $ ('# content') Laschen ('add', 'tabs/editor.php', Daten [i] .nombre);. – Gerardo

0

Ein anderer Weg, dies zu tun ist durch ajaxComplete mit:

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

Sie die tabsload Ereignis http://jqueryui.com/demos/tabs/#event-load

Sehen Sie, wie es im Beispiel unten arbeiten können:

$('#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?'); 
}); 
2

jQuery UI "Tabs" bieten Callback-Methode. Schau unten nach!

$("#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 
     } 
    } 
}); 
Verwandte Themen