Обратный вызов после ajax загрузки вкладки

Question

Как я могу применить некоторый код к содержимому вкладки, загруженной ajax? Я пытался использовать $ (document) .ready внутри загруженного содержимого, но это не позволило загрузить стили CSS (не знаю почему).

Есть ли функция обратного вызова? Должен ли я использовать $ (document) .ready и стили внутри загруженного документа каким-либо другим способом?

Если использовать $ (document) .ready внутри загруженного документа нормально, я должен также включить ссылки на jquery и его плагины?

Answer 1

Вы пробовали событие загрузки ? Это следует вызывать, когда содержимое вкладки загружено.

В общем случае вы не должны рассматривать загруженный элемент как новую страницу и вызывать $ (document) .ready. Это не новая страница, но некоторые новые элементы добавлены в DOM. Все методы ajax имеют метод обратного вызова, который вызывается при успешной загрузке данных.

Answer 2

Какой код вы используете для загрузки контента через ajax? Если вы используете команду jQuery, такую ​​как load или ajax, я бы рекомендовал поместить ваш код в функцию обратного вызова. Например, используя load

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

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

});

Answer 3

Пользовательский интерфейс jQuery «Tabs» предоставляет метод обратного вызова. Проверьте ниже!

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

Answer 4

Вы можете использовать событие табуляции http://jqueryui.com/demos/tabs/#event-load

Посмотрите, как это может работать в следующем примере:

$('#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

Другой способ сделать это - использовать ajaxComplete:

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