Search jQuery

jQuery Forum

tabs widget showing content from all tabs

in jQuery Mobile • 4 years ago

Using JQM 1.4.5 with JQ 2.1.4

I have a really basic tab control, it has three divs and no matter how much clicking I do on the tab/navbar portion the content of all three divs is constantly displayed. JQM doesn't seem to be adding any classes to/from the content divs.

Am I missing something here? (Well obviously I am, but what?

My includes are:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<script src="jquery.mobile/jquery-2.1.4.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

My HTML is:

<div id="creditsPage" data-role="page" data-theme="b" data-quicklinks="true">
    <div role="main" class="ui-content">
    
<div data-role="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active" data-href="buymore">Buy More</a></li>
          <li><a href="#" data-href="transfer">Transfer</a></li>
          <li><a href="#" data-href="history">History</a></li>
        </ul>
      </div>
      <div id="buymore" class="tab-content">
          <p>Pick your package:</p>
          <p>3 credits = $0.99</p>
      </div>
      <div id="transfer" class="tab-content">
          <p>Donate credits.</p>
          <p>Send credits to a friend.</p>
      </div>
      <div id="history" class="tab-content">
          <p>History</p>
          <p>Starter allotment: 3</p>
      </div>
    </div>
    
    </div> 
    <div data-role="footer" data-position="fixed" data-theme="b">
      <h1>Credits Page</h1>
    </div>
</div>

My JS is:

$("#credits").enhanceWithin().tabs();

Replies(10)

jakecigar

Re: tabs widget showing content from all tabs

4 years ago

Do the tabs like they do on Tabs Widget | jQuery Mobile API Documentation You need a

<div data-role="tabs">

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div id="creditsPage" data-role="page" data-theme="b" data-quicklinks="true">
<div role="main" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li>
<a href="#buymore" class="ui-btn-active" data-href="buymore">
Buy More
</a>
</li>
<li>
<a href="#transfer" data-href="transfer">
Transfer
</a>
</li>
<li>
<a href="#history" data-href="history">
History
</a>
</li>
</ul>
</div>
<div id="buymore" class="tab-content">
<p>
Pick your package:
</p>
<p>
3 credits = $0.99
</p>
</div>
<div id="transfer" class="tab-content">
<p>
Donate credits.
</p>
<p>
Send credits to a friend.
</p>
</div>
<div id="history" class="tab-content">
<p>
History
</p>
<p>
Starter allotment: 3
</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h1>
Credits Page
</h1>
</div>
</div>
</body>
</html>

JΛ̊KE

PPetree

Re: tabs widget showing content from all tabs

4 years ago

Sorry, I've tried about 10 iterations with this...

I have a <div data-role="tabs"> and that does nothing... same problem.

jakecigar

Re: tabs widget showing content from all tabs

4 years ago

Try using my entire page. It works.

The links need to be changed as well

<a href="#buymore" class="ui-btn-active" data-href="buymore">

That's how JQM knows which tabs to hide.

JΛ̊KE

PPetree

Re: tabs widget showing content from all tabs

4 years ago

Going to this style sheet didn't work.

You're using a MUCH older version of JQ 1.12.4... If I go backwards, how many other things will I break just for a tabs widget that should work as advertised? (this is where I start getting crabby and cynical!)

I'm not using this page as an external page, it's an ajax load into the dom.

So far these changes haven't moved me along at all... In fact, using the html from the 1.5.0 link you provided above doesn't work either:

<div data-role="page" id="page1">
<div data-role="header">
    <h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
    <div data-role="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
          <li><a href="#fragment-2">Two</a></li>
          <li><a href="#fragment-3">Three</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>
    </div>
</div>
</div>

jakecigar

Re: tabs widget showing content from all tabs

4 years ago

is the style sheet I used.

1.12.4 jQuery is identical to 2.2.4, except it works on older IE versions. And it is the jQuery version, not the JQM version.

When you ajax in some new content you need to enhance it. Originally your code enhanced something that did not exist.

$("#credits").enhanceWithin().tabs();

There was nothing with id=credits.

You need to make a demo with all your code. Probably in Plunker, as there you can ajax in static files.

JΛ̊KE

PPetree

Re: tabs widget showing content from all tabs

4 years ago

I tried it with the style sheet you used. Nada.

Since this is a mobile app I see no reason to revert to something that supports older versions of IE.

The id=credits is in my code. It is being enhanced but nothing.

I'll try to post this on plunker this afternoon.

jakecigar

Re: tabs widget showing content from all tabs

4 years ago

Don't post. I found the bug in JQM, and the workaround,

Tabs widget exhibits odd behavior when it's on a page that is linked to · Issue #7169 · jquery/jquery-mobile

I made a little demo @ tabs.

JΛ̊KE

PPetree

Re: tabs widget showing content from all tabs

4 years ago

Plunk: https://plnkr.co/edit/3ti56etIHfCgkxgXMNqB

BTW, if you replace the JQ/M includes in the header with the ones from the 1.5.0-alpha example from your previous post, the tabs work but the footer doesn't.

<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

Also, if you try using JQ 2.2.4 it doesn't work.

watusiware

Re: tabs widget showing content from all tabs

4 years ago

The (Issue 7169) fix was made in 1.5 in 2015. It's now 2018. 1.5 still hasn't been released.

This is why I stopped using jQuery Mobile a long time ago...

PPetree

Re: tabs widget showing content from all tabs

4 years ago

When someone else wanders in here trying to solve this, here's the code that Jake (wrote or found) that fixes the problem:

$.widget( "ui.tabs", $.ui.tabs, {
    _createWidget: function( options, element ) {
        var page, delayedCreate,
            that = this;
        if ( $.mobile.page ) {
            page = $( element )
                .parents( ":jqmData(role='page'),:mobile-page" )
                .first();
            if ( page.length > 0 && !page.hasClass( "ui-page-active" ) ) {
                delayedCreate = this._super;
                page.one( "pagebeforeshow", function() {
                    delayedCreate.call( that, options, element );
                });
            }
        } else {
            return this._super();
        }
    }
});

Top Reply

Response title

Attachments

jQuery Forum

tabs widget showing content from all tabs

Replies(10)

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Re: tabs widget showing content from all tabs

Statistics

Tags

Actions

Related Posts