Question

Hi I’m using JQuery tabs http://jqueryui.com/demos/tabs/ with search results being returned from my server with each row potentially having its own tabs depending on the search results. If the user clicks on the sorting options then the search results change including the tabs within each row returned which may or may not have tabs. In the example above you can see there are 2 records returned and the top record has tabs called Other Videos.

I have been successfully able to retrieve the resultset back from the server and the template is bulding correctly, however i cannot get the .tabs() function to fire? Does anyone have any experience with using tabs and know how I can get my tabs() function to fire?

Here is the code I use to dynamically load the template after the json result set is returned:

$(".searchBox").fadeOut("fast", function () {
    $(this).html("").fadeIn("fast", function () {
        $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");
    });
});

And here is a for loop that I use to iterate over the results after the template has been loaded with the new html tabs created to try and get the .tabs() function to fire:

for(var i=0;i<json.Data.SearchResults.Results.length;i++)

{
    if (json.Data.SearchResults.Results[i].OtherVideos.length || json.Data.SearchResults.Results[i].VideoFriends.FriendCount > 0)
    {
        $(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();
        if ($(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").length > 0)
            alert("it exists");
        else
            alert("it dont");
    }
}

Suffice to say the alert box “it exists” appears successfully so it is finding the dynamically created html tab that the template generated however the tab itself is not being initialized by the statement:

$(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();

Does anybody know the reason why or what I’m missing here to get my .tabs() function to fire …

I’ve examined the dynamic content and double checked the html code using firebug inspector and everything is according to how it should be the id’s are correct, the #id’s are there and so on, so my only conclusion is that the .tabs() function is not firing. Is this a limitation on the JQuery tabs itself? Can it not perform this type of “live” loading capability? Is there a callback function I should be using as part of loading the template itself?

Here is a picture of what is being returned after the call to the server without the tabs working:

Answer 1

Okay I fixed the problem, and thought I’d better give my answer for those of you who suffer a similar problem.

I should have placed my for loop inside of the same callback function as the tmpl call e.g:

$(".searchBox").fadeOut("fast", function () {
    $(this).html("").fadeIn("fast", function () {
        $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");

        // For loop should go here!

    });
});

I had the for loop after this block of code and the tabs() function essentially was not referencing the newly created tabs at all.