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

Question

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".

balexandre · Accepted Answer · 2011-05-13 09:03:03Z

3

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

answered May 13, 2011 at 9:03

balexandre

75.5k47 gold badges240 silver badges352 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Evgeni Nabokov Over a year ago

Yes, I want menu that looks like these tabs, coz I like it. I thought that Tabs could behave like menu, but it does not. So, I chose wrong widget.

balexandre Over a year ago

yes, as I said you did, you can easily copy the <ul> and apply the same class so you can have the same look and feel, but tabs have a little diff behavior that menus. Btw, if my question is right or was important, upvote or/and select it as correct answer.

Evgeni Nabokov Over a year ago

Yeah, I have done it yet -- copied layout of Tabs. I can't vote coz I have low reputation.

Bugs · Accepted Answer · 2012-03-29 13:51:15Z

0

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>

answered Mar 29, 2012 at 13:51

Bugs

1,4521 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related