Como executar uma função de retorno de chamada após o conteúdo do ajax ter sido carregado em uma nova aba jquery ui - jquery, jquery-ui

As guias da IU do Jquery têm um evento add que é acionado imediatamente após a inclusão de uma guia. Neste exemplo, quando você clica em um botão, uma nova guia é adicionada e ela é selecionada.

Eu estou adicionando conteúdo dinâmico usando ajax da seguinte maneira:

var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>",
add: function (event, ui){
var lastIndex = $("#tabs").tabs("length")-1;
$("#tabs").tabs("select", lastIndex);
}
});

function createTab(phpFile){
$tabs.tabs("add", phpFile, "Tab Title");
}

$("button").on("click", function (){
var url = "search.php?term=someRandomString";
createPlaySongTab(url);
});

Meu objetivo é fazer com que o conteúdo recém-adicionado desapareça no painel

    add: function (event, ui){
$(ui.panel).hide();
var lastIndex = $("#tabs").tabs("length")-1;
$("#tabs").tabs("select", lastIndex);
$(ui.panel).fadeIn(1000);
}

Vamos dizer que meu .php se parecia com isso

<?php sleep(1); echo "hello world!";?>

Neste caso, o conteúdo não se desvaneceria desde a duração do fade fadeIn(1000) e o evento add é acionado imediatamente após a inclusão da guia, não após o carregamento do arquivo .php. Como posso fazer o conteúdo desaparecer depois que o conteúdo tiver sido completamente carregado?

Respostas:

Tente carregar o evento. Este evento deve ser acionado assim que o conteúdo da guia remota for carregado.

$( ".selector" ).tabs({
load: function(event, ui) { ... }
});

existe a função jquery para isso ajaxcomplete (); google, espero que isso ajude $ ("# element"). ajaxcomplete (function () {suas coisas //});