Функция JQuery Tab не запускается через шаблоны JQuery - PullRequest
Новая
       6

Функция JQuery Tab не запускается через шаблоны JQuery

0 голосов
/ 05 марта 2011

What it should look like

Привет! Я использую вкладки JQuery http://jqueryui.com/demos/tabs/ с результатами поиска, возвращаемыми с моего сервера, причем каждая строка потенциально имеет свои вкладки в зависимости от результатов поиска.Если пользователь нажимает на параметры сортировки, результаты поиска изменяются, включая вкладки в каждой возвращенной строке, которые могут иметь или не иметь вкладки.В приведенном выше примере вы видите, что возвращены 2 записи, а в верхней записи есть вкладки под названием «Другие видео».

Мне удалось получить набор результатов обратно с сервера, и шаблон корректно создается, однако яневозможно получить функцию .tabs () для запуска?Кто-нибудь имеет опыт использования tabs и знает, как я могу заставить мою функцию tabs () срабатывать?

Вот код, который я использую для динамической загрузки шаблона после возврата набора результатов json: 

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

А вот цикл for, который я использую для перебора результатов после загрузки шаблона с новыми html-вкладками, созданными для попытки запуска функции .tabs ():

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

Достаточно сказать, что окно с предупреждением «оно существует» появляется успешно, поэтому он находит динамически созданную вкладку html, сгенерированную шаблоном, однако сама вкладка не инициализируется оператором:

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

Кто-нибудь знает причину, по которой или чего мне не хватает, чтобы заставить мою функцию .tabs () срабатывать ...

Я имеюпроверил динамический контент и дважды проверил html-код с помощью инспектора firebug, и все в соответствии с тем, как должно быть, правильные идентификаторы, # идентификаторы есть и так далее, так что мой единственный выводу .tabs () функция не стреляет.Это ограничение на самих вкладках JQuery?Разве он не может выполнять этот тип «живой» загрузки?Есть ли функция обратного вызова, которую я должен использовать для загрузки самого шаблона?

Вот изображение того, что возвращается после вызова на сервер без работающих вкладок:

Tabs not working

1 Ответ

0 голосов
/ 05 марта 2011

Хорошо, я исправил проблему и подумал, что лучше дать ответ тем из вас, кто испытывает похожую проблему.

Я должен был поместить цикл for в ту же функцию обратного вызова, что и вызов tmpl, например: 

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

        // For loop should go here!

    });
});

У меня был цикл for после этого блока кода, и функция tabs () вообще не ссылалась на вновь созданные вкладки.

...