Обновление содержимого вкладок по щелчку во вкладках пользовательского интерфейса JQuery - PullRequest
Новая
       68

Обновление содержимого вкладок по щелчку во вкладках пользовательского интерфейса JQuery

12 голосов
/ 28 октября 2009

Содержимое TAB1 загружается ajax с удаленного URL.Когда выбран TAB1, мне нужно переключиться на TAB2, а затем вернуться к TAB1, чтобы обновить загруженный контент.

Как сделать так, чтобы TAB1 обновлял загруженный контент при нажатии на его вкладку?

Изменить: HTML-код, как показано ниже 

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>

Ответы [ 12 ]

0 голосов
/ 24 декабря 2013

Я знаю, что эта ссылка старая, но я столкнулся с такой же ситуацией. Я пытался понять и включить все, что было сказано здесь, но это все еще не работало, или это испортило бы то, что я имею.

У меня есть модальное диалоговое окно с 4 вкладками, значения индекса 0,1,2,3, и я хотел открыть на вкладке 1, поэтому в моем коде есть следующая строка: 

    $("#tabs").tabs('select',1);

и вкладка 1 всегда будут содержать данные предыдущих отображений (html ajax content), пока я не нажму на другую вкладку (например, вкладку 2) и затем вернусь (к вкладке 1) ... так что я сделал следующее: 

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

и все заработало:)

0 голосов
/ 28 октября 2009

В случае успеха вызова jQuery вы можете заменить html новым html.

Вы еще не опубликовали код, поэтому вы, возможно, уже делаете это, но; 

success: function(msg) {
    $('.TabOne').html(msg);
}

выше, работает, если вы возвращаете HTML. Если вы возвращаете объект, вам может потребоваться выполнить дополнительную работу, но в целом вышесказанное должно сработать.

Редактировать Я должен также упомянуть, что .TabOne - это имя класса. Таким образом, для работы вышеуказанного кода у владельца содержимого вкладки должен быть класс TabOne.

Помните, что имя класса не обязательно должно существовать как стиль, чтобы это тоже работало.

Редактировать 2

Хммм, я вижу, что вы пытаетесь сделать сейчас, и я немного растерялся. Проведет некоторое тестирование и, возможно, сможет связаться с вами.

К сожалению.

Страница:
...