Search code examples
javascriptjqueryhtmlhandlebars.jssemantic-ui

Semantic Tabs and handlebars issue with jquery, tab content not becoming active

So I'm looking to generate a dynamic number of semantic style tabs with handlebars. So far handlebars has been fine with semantic, but this instance something weird is happening. When I click on a tab, that tab becomes active, but it's corresponding element never shows. In the elements tab I can see that the class name for the div is updating, so I know it found the right element to add the "active" class to, but its never added. Below is my cut down solution that shows the issue. 

function createGrid(){
  var gridInfo = document.getElementById("gridTemplate").innerHTML;
  var template = Handlebars.compile(gridInfo);

  var name = 'myName'
  var componentsUsed = ['myName', 'myName1', 'myName2']
  var gridobj = {
    tabs: [],
    name:name
    
  }
  for (var i = 0; i < componentsUsed.length; i++){
    gridobj.tabs.push({tabName:componentsUsed[i]})
  }
  gridData = template(gridobj)
  document.getElementById("data3").innerHTML += gridData;
  var firstTab = "#tab" + componentsUsed[0]
  var firstTabContent = '#' + componentsUsed[0]
  $(firstTab).addClass("active");
  $(firstTabContent).addClass("active");

}



createGrid()
$('.menu .item')
  .tab()
;




//end
<html lang="en">
<head>
  <meta charset="utf-8"> 
  <!--<link rel="stylesheet" href="css/style.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script id="gridTemplate" type="text/x-handlebars-template"> 

    <div class="ui top attached tabular menu">
      {{#each tabs}}
        <a class="item" id="tab{{tabName}}" data-tab="{{tabName}}">{{tabName}}</a>
      {{/each}}

      {{#each tabs}}
      <div id="{{tabName}}" class="ui bottom attached tab segment" data-tab="{{tabName}}">
        <h2>Content for {{tabName}}</h2>
      </div>
    {{/each}}

  </div>
  </script>
</head>

<body>
  <div id="data3"></div>
</body>
</html>

The tab syntax comes out the same as it does in the very basic Semantic UI tabs example. Where is the issue here? Here's a working example without handlebars:

$('.menu .item')
  .tab()
;
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--<link rel="stylesheet" href="css/style.css">-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    
  
</head>

<body>
  <div class="ui top attached tabular menu">
    <a class="item active" data-tab="first">First</a>
    <a class="item" data-tab="second">Second</a>
    <a class="item" data-tab="third">Third</a>
  </div>
  <div class="ui bottom attached tab segment active" data-tab="first">
    First
  </div>
  <div class="ui bottom attached tab segment" data-tab="second">
    Second
  </div>
  <div class="ui bottom attached tab segment" data-tab="third">
    Third
  </div>
</body>
</html>

Solution

  • Your closing </div> tag was missing :)

    function createGrid(){
  var gridInfo = document.getElementById("gridTemplate").innerHTML;
  var template = Handlebars.compile(gridInfo);

  var name = 'myName'
  var componentsUsed = ['myName', 'myName1', 'myName2']
  var gridobj = {
    tabs: [],
    name:name
    
  }
  for (var i = 0; i < componentsUsed.length; i++){
    gridobj.tabs.push({tabName:componentsUsed[i]})
  }
  gridData = template(gridobj)
  document.getElementById("data3").innerHTML += gridData;
  var firstTab = "#tab" + componentsUsed[0]
  var firstTabContent = '#' + componentsUsed[0]
  $(firstTab).addClass("active");
  $(firstTabContent).addClass("active");

}



createGrid()
$('.menu .item')
  .tab()
;




//end
    <html lang="en">
<head>
  <meta charset="utf-8"> 
  <!--<link rel="stylesheet" href="css/style.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script id="gridTemplate" type="text/x-handlebars-template"> 

    <div class="ui top attached tabular menu">
      {{#each tabs}}
        <a class="item" id="tab{{tabName}}" data-tab="{{tabName}}">{{tabName}}</a>
      {{/each}}
    <!-- this tag was missing -->
    </div>
      {{#each tabs}}
      <div id="{{tabName}}" class="ui bottom attached tab segment" data-tab="{{tabName}}">
        <h2>Content for {{tabName}}</h2>
      </div>
    {{/each}}

  </div>
  </script>
</head>

<body>
  <div id="data3"></div>
</body>
</html>