jquery-ui .tabs ajax загрузить конкретное содержимое страницы? - PullRequest
Новая
       14

jquery-ui .tabs ajax загрузить конкретное содержимое страницы?

2 голосов
/ 11 октября 2009

Я пытаюсь использовать .tabs () пользовательского интерфейса jQuery для получения контента через AJAX, но по умолчанию используется захват всего содержимого страницы. Как мне получить контент с определенного #id и / или нескольких # id?

У меня есть ощущение, что мне нужно использовать событие load: (http://docs.jquery.com/UI/Tabs#event-load),, но Мне нужна помощь, чтобы выяснить это .

Пример:

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

<div id="tabs">

    <div id="tabs_display">

    </div>

    <ul id="the_tabs">
        <li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li>
        <li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li>
        <li><a href="testcontent.html" title="tabs display"><span>3</span></a></li>
        <li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li>
   </ul>

</div><!-- /#tabs -->

Страница, полученная с помощью предыдущей разметки: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Remote HTML Page Example</title>
    </head>
    <body>
        <div id="content">
            I want this content
        </div>
        <div id="other_stuff">
            Not this content    
        </div>
    </body>
</html>

JS (для целей настройки): 

$(document).ready(function(){

    /* Tabs
    --------------------*/
    $(function() {

        var $tabs = $('#tabs').tabs({

        });

    });

});

Ответы [ 3 ]

3 голосов
/ 07 марта 2013

В Jquery-UI 1.9 «ajaxOptions» не рекомендуется; так что вместо этого код ниже работал для меня: (ссылка: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)

$(function() {
    $( "#the_tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                    ui.ajaxSettings.dataType = 'html';
                    ui.ajaxSettings.dataFilter = function(data) {
                            return $(data).filter("#content").html();
                    };
            }      
    });
});
2 голосов
/ 11 октября 2009

$ (документ) .ready (функция () {

/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
    ajaxOptions: {
        dataFilter: function(data, type){
            return $(data).filter("#content").html();
        }
    }
});

});

Решение переходит к Supavisah в #jquery на irc.freenode.net

1 голос
/ 29 января 2011

Мне повезло, используя .find, а не .filter. Как это: 

$(document).ready(function(){
$('#the_tabs').tabs({           
        ajaxOptions: {
                cache : true,
                dataFilter: function(data){
                        return $(data).find('#content');
                },
        }
});    
});
...