CODEWITHSUNDEEP
jquery-mobile
Kelvin
Kelvin

Reputation: 585

Dynamically add tabs content in mobile page

I use $('#tab-content').load('/embed_tab.html'); to load below page, the output is in bullet point instead of tabs? This is the page I load when I click something on parent page. How can I solve the problem.

Script 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

is loaded from the head.

    <div data-role="tabs" id="detail-tabs">
    <div data-role="navbar">
        <ul>
          <li><a href="#sellpoint" data-ajax="false" class="ui-tab-left ui-btn-active">Selling Point</a></li>
          <li><a href="#terms" data-ajax="false" class="ui-tab-right">Terms of Use</a></li>
        </ul>
      </div>
    <div id="sellpoint" class="ui-body-d ui-content">
        <h1>Selling Point</h1>
    </div>
    <div id="terms">
        <h1>Terms of Use</h1>
    </div>
    </div>

Upvotes: 0

Views: 134

Answers (1)

ezanker
ezanker

Reputation: 24738

I assume you are also loading the jQM javascript as well as the css.

After the $('#tab-content').load('/embed_tab.html'); is finished, you have to initialize the tabs widget to cause it to be enhanced. So once the load is complete, try calling something like:

$('#tab-content').enhanceWithin();

or 

$('#tab-content [data-role="tabs"]').tabs();

EDIT: to call these after the load is complete, use the complete callback function of the load method:

$('#tab-content').load('/embed_tab.html', function() {
  $('#tab-content').enhanceWithin();
});

API DOC: http://api.jquery.com/load/

Upvotes: 1

Related Questions