Home → Velocity Formats →

Working on getting Tabs Velocity Format

• Edit

Fernando

28 Apr, 2016 07:15 PM

I am almost done writing this format working the way I want it to be. Here is the section I am talking about:

#macro ( tts $num $anchor )
        #if ( $num == 1 )
    #set ( $ret = "one" )
        #elseif( $num == 2 )
    #set ( $ret = "two" )
        #elseif( $num == 3 )
    #set ( $ret = "three" )
        #elseif( $num == 4 )
    #set ( $ret = "four" )
        #elseif( $num == 5 )
    #set ( $ret = "five" )
        #elseif( $num == 6 )
    #set ( $ret = "six" )
        #elseif( $num == 7 )
    #set ( $ret = "seven" )
        #elseif( $num == 8 )
    #set ( $ret = "eight" )
        #elseif( $num == 9 )
    #set ( $ret = "nine" )
        #elseif( $num == 10 )
    #set ( $ret = "ten" )
    #end
        #if ( $anchor == "true" )
    #set ( $ret = "#" + $ret )
#end
$ret#end

#if ( $tabs.size() > 0 )

<ul class="nav nav-tabs">
    #foreach ( $tab in $tabs )
        #set ( $header = $tab.getChild("header") )
        #if ( $foreach.index == 0 )
            #set ( $active = 'class="active"' )
        #else
            #set ( $active = '' )
        #end
        <li $active><a href="#tts($foreach.count, true)" data-toggle="tab">$_EscapeTool.xml($header.value)</a></li>
    #end
</ul>
<div class="tab-content">
    #foreach ( $tab in $tabs )
        #set ( $xml = $tab.getChild("content") )
        #if ( $foreach.index == 0 )
            #set ( $active = 'active' )
        #else
            #set ( $active = '' )
        #end
        <div class="tab-pane $active" id="#tts($foreach.count, true)" data-toggle="tab">
            $_EscapeTool.xml($xml.value)
        </div>
    #end
</div>
#end
#end
</div>

In the <ul class="nav nav-tabs"> tag I have the $header variable to work right, <li $active><a href="#tts($foreach.count, true)" data-toggle="tab">$_EscapeTool.xml($header.value)</a></li>. So every new tab I get the different one that I type in the metadata set.

But when i go to and try to do the same thing on <div class="tab-content"> and type $_EscapeTool.xml($xml.value) it only grabs the first one but not the other ones I am doing. Am I missing something?

Thanks for all of the help!

• velocity-format.txt 4.01 KB
• xml-info.xml 6.37 KB

1. 1 Posted by Ryan Griffith on 29 Apr, 2016 12:28 PM

   

   Hi Fernando,

   When testing this format in my local 7.14.2 instance, I am not seeing the issue you described with the tab content <div>. Here is the rendered markup:

   <div class="col-md-7 main-content">
       <content />
       <ul class="nav nav-tabs">
           <li class="active">
               <a href="                                                #one" data-toggle="tab">Test 1 </a>
           </li>
           <li>
               <a href="                                                #two" data-toggle="tab">Test 2</a>
           </li>
           <li>
               <a href="                                                #three" data-toggle="tab">Test 3</a>
           </li>
       </ul>
       <div class="tab-content">
           <div class="tab-pane active" id="                                                #one" data-toggle="tab">
               This is a test 1
           </div>
           <div class="tab-pane " id="                                                #two" data-toggle="tab">
               This is a test 2
           </div>
           <div class="tab-pane " id="                                                #three" data-toggle="tab">
               This is a test 3
           </div>
       </div>
   </div>
   

   This appears to be correct. Am I missing something?

   Thanks!

   • Edit

2. 2 Posted by Fernando on 29 Apr, 2016 01:02 PM

   

   So the way the code works is when you click in
    
   <li class="active">
    <a href="#one" data-toggle="tab">Test 1 </a>
    </li>

   This tab should shows up:

   <div class="tab-pane active" id="#one" data-toggle="tab">
    This is a test 1
   </div>

   The problem is whenever I go and click in a different tab, for example :

   <li>
   <a href="#two" data-toggle="tab">Test 2</a>
   </li>

    I still have this showing up

   <div class="tab-pane active" id="#one" data-toggle="tab">
    This is a test 1
   </div>

   instead of

   <div class="tab-pane active" id="#one" data-toggle="tab">
    This is a test 2
   </div>

   What I am thinking I have issues with is getting my <li> tags to communicated with my <div>

   Let me know if this makes sense. Thanks again for the help!

   • Edit

3. 3 Posted by Ryan Griffith on 29 Apr, 2016 03:39 PM

   

   Thank you for following up, Fernando. Curious if the problem is all the whitespace generated by the macro within the href and id attributes. When you have a moment, you can try the following:

   <ul class="nav nav-tabs">
       #foreach ( $tab in $tabs )
           #set ( $header = $tab.getChild("header") )
           #if ( $foreach.index == 0 )
               #set ( $active = 'class="active"' )
           #else
               #set ( $active = '' )
           #end
           #set ($href = "#tts($foreach.count, true)")
           <li $active><a href="${href.trim()}" data-toggle="tab">$_EscapeTool.xml($header.value)</a></li>
       #end
   </ul>
   <div class="tab-content">
       #foreach ( $tab in $tabs )
           #set ( $xml = $tab.getChild("content") )
           #if ( $foreach.index == 0 )
               #set ( $active = 'active' )
           #else
               #set ( $active = '' )
           #end
           #set ($id = "#tts($foreach.count, true)")
           <div class="tab-pane $active" id="${id.trim()}" data-toggle="tab">
               $_EscapeTool.xml($xml.value)
           </div>
       #end
   </div>
   

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. 4 Posted by Fernando on 29 Apr, 2016 07:56 PM

   

   Unfortunately that did not work :( but I discovered what the issue is. Whenever I click on Tab 2, there is no code in the div tags that is setting that specific tab to active. So in other words the class "active" does not move from the first tab to the other one.

   <div class="table-pane active" data-toggle="tab" id="#one">
   This is test 1
   </div>

   <div class="table-pane" data-toggle="tab" id="#two">
   This is test 2
   </div>

   Could it be related with some javascript that would fire that? or would that still be involved in the format?

   Thanks again for the help!

   • Edit

5. 5 Posted by Ryan Griffith on 29 Apr, 2016 08:00 PM

   

   Hi Fernando,

   That could definitely be the problem. I am assuming you are using Bootstrap tabs here? If so, are you including the Bootstrap JavaScript, or at the very least the tabs plugin? If not, you will need to include this on your page in order for the tab functionality to work.

   Please let me know if you have any questions.

   Thanks!

   • Edit

6. Tim closed this discussion on 25 May, 2016 05:28 PM.