Search jQuery

jQuery Forum

Using jQuery UI

terry1511..

Problem with tabs, not finding tab id's?. Inserting it's own divs.

in Using jQuery UI • 10 years ago

I have a tab set thus:

div id="TabDiv">
    <ul>
        <li><a href="#tab-1">{TAB Option='0'}</a></li>
        <li><a href="#tab-2">{TAB Option='1'}</a></li>
        <li><a href="#tab-3">{TAB Option='2'}</a></li>
        <li><a href="#tab-4">{TAB Option='3'}</a></li>
        <li><a href="#tab-5">{TAB Option='4'}</a></li>
        <li><a href="#tab-6">{TAB Option='5'}</a></li>
        <li><a href="#tab-7">{TAB Option='6'}</a></li>
        <li><a href="#tab-8">{TAB Option='7'}</a></li>
        <li><a href="#tab-9">{TEXT}Rates{/TEXT}</a></li>
    </ul>

    <div id="tab-1"><p>Tab1</p></div>
    <div id="tab-2"><p>Tab2</p></div>
    <div id="tab-3"><p>Tab3</p></div>
    <div id="tab-4"><p>Tab4</p></div>
    <div id="tab-5"><p>Tab5</p></div>
    <div id="tab-6"><p>Tab6</p></div>
    <div id="tab-7"><p>Tab7</p></div>
    <div id="tab-8"><p>Tab8</p></div>
    <div id="tab-9"><p>Tab9</p></div>

</div>

I Initialise the tabs like this:

<script type="text/javascript">

    $( document ).ready( function( e )
    {
        $( '#TabDiv' ).tabs();
    } );
</script>

But when the tabs initialise it inserts it's own divs containing the root page of my web site, and my divs are still visible, thus: (Showing only one tab)

<div id="TabDiv" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="visibility: visible;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-2" aria-selected="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-2" aria-labelledby="ui-id-3" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-3" aria-labelledby="ui-id-4" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-4" aria-labelledby="ui-id-5" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-5" aria-labelledby="ui-id-6" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-6" aria-labelledby="ui-id-7" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-7" aria-labelledby="ui-id-8" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-8" aria-labelledby="ui-id-9" aria-selected="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-9" aria-labelledby="ui-id-10" aria-selected="false">
</ul>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="true" aria-hidden="false">
<meta content="0;url=http://xxxxx.mobi/CookieTest.php" http-equiv="refresh">
<noscript> <meta http-equiv="refresh" content="0;url=http://xxxxxxxxxx.mobi/NoJava.php" /> </noscript>
</div>

and my tabs are unchanged:

<div id="tab-1">
<p>Tab1</p>
</div>
<div id="tab-2">
<div id="tab-3">
<div id="tab-4">
<div id="tab-5">
<div id="tab-6">
<div id="tab-7">
<div id="tab-8">
<div id="tab-9">

Does anyone know what is happening? I thought that it might be a timing problem on load, so I move all the script loading to just before the </body> tag but it didn't make ant difference.

Thanks in advance
Terry

Replies(6)

tward392

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

What version are you using?
What browser?

http://jsfiddle.net/ZmKyQ/

Seems like your code is showing all the tabs??

terry1511..

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

I using Firefox, but also goes wrong in Chrome an IE.
I am using a customised version from Themeroller. I was using JQuery jquery-1.10.1.js but when I had the problem I when back to the one supplied by Themeroller "jquery-1.9.1.js" but it didn't make any difference. Yes it is showing all the data tabs but the content of all the tabs is showing stacked down the page.

In the visible tab it generated the content shows ":
<noscript> <meta http-equiv="refresh" content="0;url=http://xxxxxxxxxx.mobi/NoJava.php" /> </noscript>

Which is part of the initial testing on my site to make sure that the browser has cookies enabled and also is allowed to run javascript.

May be something to do with Ajax?

Regards
Terry.

villord

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

I have this problem too.

In JsFiddle it`s not shows.

But shows on the site, when address have format http://hostname/some_url

If URL have only hostname tabs work correct.

villord

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

Problem was in <base> tag, if you are use this tag tabs not working

details:

http://bugs.jqueryui.com/ticket/8637

terry1511..

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

Yes I use the base tag on my site. Thanks.

Best regards

Terry

terry1511..

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

10 years ago

After reviewing the many posts, and seeing that many, many, many people have had the same problem with this behavior of the tab widget in conjunction with the base tag. I wonder why there isn't a BIG WARNING in the documentation about using this tab widget with the base tag. The warning would have saved me many, many hours of trying to solve the problem.

Regards
Terry

Top Reply

Response title

Attachments

jQuery Forum

Problem with tabs, not finding tab id's?. Inserting it's own divs.

Replies(6)

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Re: Problem with tabs, not finding tab id's?. Inserting it's own divs.

Statistics

Tags

Actions