Comment exécuter une fonction de rappel une fois le contenu ajax chargé dans un onglet jquery ui récemment ajouté - jquery, jquery-ui

Les onglets de l'interface utilisateur Jquery ont un événement add qui est déclenché immédiatement après l'ajout d'un onglet. Dans cet exemple, lorsque vous cliquez sur un bouton, un nouvel onglet est ajouté et sélectionné.

J'ajoute du contenu dynamique en utilisant ajax de la manière suivante:

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);
});

Mon objectif est de fondre le contenu nouvellement ajouté dans le panneau, comme

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

Disons que mon .php ressemblait à ceci

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

Dans ce cas, le contenu ne disparaîtrait pas du tout car la durée du fondu était fadeIn(1000) et l'événement add est déclenché immédiatement après l'ajout de l'onglet, pas après le chargement du fichier .php. Comment puis-je faire fondre le contenu une fois le contenu chargé?

Réponses:

Essayez l'événement de charge. Cet événement devrait se déclencher une fois le contenu de l'onglet distant chargé.

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

il existe une fonction jquery pour cela ajaxcomplete (); google, espérons que cela aide $ ("# élément"). ajaxcomplete (function () {vos affaires //});