CODEWITHSUNDEEP
jquery-ui
Evgeni Nabokov
Evgeni Nabokov

Reputation: 2571

jQuery UI Tabs: URL instead of AJAX does not work properly

I wrote like there: http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs({
            select: function(event, ui) {
                var url = $.data(ui.tab, 'load.tabs');
                if( url ) {
                    location.href = url;
                    return false;
                }
                return true;
            }
        });
    });
</script>

<div id="tabs">
    <ul>
        <li>
            <a href="/default.htm">Home</a>
        </li>
        <li>
            <a href="/about.htm">About</a>
        </li>
    </ul>
</div>

Tabs are created, but initial list (div, ul, li) is visible as well. Another problem: when I hover over tab, I see URL kind of /default.htm#ui-tabs-1, /default.htm#ui-tabs-2 etc. But I want to see URL "/default.htm" over the 1st tab and URL "/about.htm" over the 2nd tab. What could I do to solve my problem?

UPDATE In version 1.9 there is powerful widget "menu".

Upvotes: 2

Views: 3476

Answers (2)

Bugs
Bugs

Reputation: 1452

I don't want to encourage you to do this, but the solution is currently available on jQuery UI's website: http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

You may extend it a bit to follow only certain URLs:

select: function(e, ui)
{
    var tab = $(ui.tab);
    var url = $.data(ui.tab, 'load.tabs');
    if(url && tab.attr('data-ajax') == 'false')
    {
        location.href = url;
        return false;
    }
    return true;
}

Then, when defining tabs:

<li><a href="..." data-ajax="false">...</a></li>

Upvotes: 0

balexandre
balexandre

Reputation: 75073

You are miss interpreting the jQuery UI Tabs.

This Tabs are for having content hide/show and if using ajax pull the page info and show it on demand.

if you want those tabs to act as a menu ... then you need a menu, not the jQuery UI Tabs.

If your idea if to use this tabs but to fetch the /about.htm as a new content, then you can use the ajax example

http://jqueryui.com/demos/tabs/#ajax

keep in mind that it will fetch the entire content, so the /about.htm page should not have <html> neither <body> tags

Upvotes: 3

Related Questions