CODEWITHSUNDEEP
jqueryajaxjquery-uitabsjquery-ui-tabs
kpentchev
kpentchev

Reputation: 3090

JQuery UI tabs using ajax to load document fragment

I am using JQuery UI tabs and would like to load a fragment from a generated page. However, the whole page is loaded. Here is the code:

<head>
<script src="/js/jquery-ui-1.8.15.custom.min.js"></script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>
</head>


<div id="tabs">
<ul > 
    <li><a href="/page #content">Tab Head</a></li>
</ul>
</div>

Is there an easy way of doing this? Also, is the Tabs plugin using .load() or .get() ajax calls?

Upvotes: 3

Views: 1620

Answers (2)

William Niu
William Niu

Reputation: 15853

You may need to do it yourself by intercepting the desired tab and load the content in. For example, you could include the actual URL for loading the fragment to a data attribute, say, data-content-url="/page #content", and load it in the select event. So, it would look something like:

$('#tabs').tabs({
    select: function(event, ui) {
        var $tabAnchor = $(ui.tab);
        if (ui.index == 0 && !$tabAnchor.data('completed')) {
            $($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() {
                // indicate the content has been loaded
                $tabAnchor.data('completed', true);
            });
        }
    }
});

The HTML would look something like: 

<div id="tabs">
    <ul>
        <li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li>
        <li><a href="#tabs2">Tab 2</a></li>
    </ul>

    <div id="tabs1"></div>
    <div id="tabs2">...</div>
</div>

Upvotes: 1

Christian
Christian

Reputation: 155

You could use the load-event ("This event is triggered after the content of a remote tab has been loaded.") of the tabs to parse/prepare/edit the loaded content and get the fragment of the page.

Upvotes: 0

Related Questions