вкладки jQuery-UI - загрузить только один раз - PullRequest
4 голосов
/ 29 марта 2010

Мне бы хотелось, чтобы содержимое моих вкладок загружалось через AJAX, но только при первом щелчке по вкладке. Теперь вкладки загружаются каждый раз, когда я нажимаю на любую вкладку. Возможно ли это?

Мой HTML

<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>

EDIT

Я не могу использовать опцию Cache, потому что содержимое вкладок может измениться.

Ответы [ 4 ]

9 голосов
/ 22 июня 2013
$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });
3 голосов
/ 08 октября 2011

Опция «кеш» может решить проблему.

$( ".selector" ).tabs({
  cache: true 
  //some other options 
});

http://docs.jquery.com/UI/Tabs#option-cache

0 голосов
/ 29 марта 2010

Я думаю, что вы можете перехватить событие, проверить, есть ли на вкладке уже содержимое, и остановить ajax, если оно есть.

, например

$('#example').tabs({
    select: function(event, ui) {
         if($('#' + ui.panel.id).html() != ''){
            return;
         }
    }
});
0 голосов
/ 29 марта 2010

Вы можете скрыть () или удалить () ссылку после выполнения загрузки (). Или, если вы хотите разрешить многократное обновление содержимого вкладки, вы можете удалить все, что было загружено в первый раз, и перезагрузить ().

Вы также можете изменить идентификатор тега ссылки и добавить вторичное поведение для возврата.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...