CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Schwarz
Schwarz

Reputation: 395

Dynamically created tabs not showing after creation in Bootstrap

I'm just using a button now to try and get it to work. It is supposed to make another selection in the dropdown box which it does, then show the content page. However it isn't changing the display to the page that was created and instead I have to manually click the new selection in the dropdown.

HTML:

<ul class="nav nav-tabs" id="srTabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#search">Search</a></li>
  <li><a data-toggle="tab" href="#upload">Upload</a></li>
  <li><a data-toggle="tab" href="#notes">Notes</a></li>
  <li class="dropdown">
    <a href="#" id="subDropdown" class="dropdown-toggle" data-toggle="dropdown">Submissions <i class="fa fa-caret-down"></i></a>
    <ul class="dropdown-menu" id="submissionContainer">
      <li><a href="#grid" data-toggle="tab">Grid</a></li>
    </ul>
  </li>
  <li><a data-toggle="tab" href="#history">History</a></li>
</ul>

<div class="tab-content" id="srContent">
  <div id="home" class="tab-pane fade in active">
    <div id="navigationBar" class="text-center">
      <button onclick="makeSub(150)">Test</button>
    </div>
  </div>

  <div id="search" class="tab-pane fade"></div>

  <div id="upload" class="tab-pane fade"></div>

  <div id="notes" class="tab-pane fade"></div>

  <div id="grid" class="tab-pane fade">
    <h1 align="center">Submissions</h1>
  </div>

  <div id="history" class="tab-pane fade">
  </div>
</div>

JavaScript

function makeSub(id) {
    $('<li><a href="#sub'+id+'" data-toggle="tab">'+id+'</a></li>').appendTo('#submissionContainer');
    $('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
    $('#sub'+id).load('/webapp/submissions/' + id);
    $('#sub'+id).tab('show');   
}

Upvotes: 0

Views: 709

Answers (1)

show-me-the-code
show-me-the-code

Reputation: 1553

You either have to bind click event to the button like in this fiddle I made, or move your makeSub function outside of the $.ready function where button's onclick event can find the function.

$.ready(function(){
//everything else
});

function makeSub(id) {
$('<li><a href="#sub'+id+'" data-toggle="tab">'+id+'</a></li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');   
}

Upvotes: 1

Related Questions