Support

Account

Home Forums Add-ons Repeater Field Nested Repeater Bootstrap Tabs

Solved

Nested Repeater Bootstrap Tabs

  • I been trying to get these Bootstrap Tabs to work with a nested repeater with no success, the tabs show and the tab title also but that’s as far as it goes, other than that the Tab Content wouldn’t render.
    This is the code:

    
    <div>
        <!-- Check for parent repeater row -->
        <?php if( have_rows('menu_sections') ): ?>
            <ul class="nav nav-tabs" role="tablist">
                <?php $row = 1; // number rows ?>
                <?php // Step 1: Loop through rows, first displaying tab titles
                while( have_rows('menu_sections') ): the_row();
                    //  ?>
                    <li role="presentation" class="<?php if($row == 1) {echo 'active';}?>">
                        <a
                                href="#<?php echo $row; ?>"
                                role="tab"
                                data-toggle="tab"
                        >
                            <?php the_sub_field('section_title'); ?>
                        </a>
                    </li>
                    <?php $row++; endwhile; // (have_rows('menu_sections') ):?>
            </ul>
        <?php endif; // (have_rows('menu_sections') ): ?>
    
        <?php reset_rows(); ?>
    
        <?php if( have_rows('section_items') ): ?>
            <div class="tab-content">
                <?php $row = 1; // number rows ?>
                <?php // Step 2: Loop through rows, now displaying tab contents
                while( have_rows('section_items') ): the_row();
                    // Display each item as a list ?>
                    <div class="tab-pane <?php if($row == 1) {echo 'active';}?>" id="<?php echo $row; ?>">
                     <ul>
                        <li><?php the_sub_field('dish_name'); ?></li>
                        <li><?php the_sub_field('dish_description'); ?></li>
                        <li><?php the_sub_field('dish_price'); ?>
                     </ul>
                    </div>
                    <?php $row++; endwhile; // (have_rows('section_items') ):?>
            </div>
    
        <?php endif; // (have_rows('section_items') ): ?>
    </div>
    

    Any help would be appreciated.
    Thanks!

  • Try putting reset_rows() between the 2 loops.

  • Thanks for your quick response I appreciate the time you’re taking to help out

    I tried reset_rows as you can see in the above code but still didn’t work,
    Do you have any other suggestions?

    Thanks,

  • I just realized that you’re using 2 different field names. Do you have 2 different repeaters that you’re using? Post some information about these fields.

  • Yes I do have two different repeaters the following is the structure of the fields,

    Repeater Fields

    Thank again,

  • so the reason is that you have nested repeaters here. I’m not going to recreate all of your code, but the second loop needs to look something like this

    
    // outer repeater loop
    if (have_rows('menu_sections')) {
      while (have_rows('menu_sections')) {
        the_row();
        // nested repeater loop
        if (have_rows('section_items')) {
          while (have_rows('section_items')) {
            the_row();
            // output for section item here
          }
        }
        // end nested repeater loop
      }
    }
    // end outer repeater loop
    
  • I changed the code to this,

    
    <div>
        <!-- Check for parent repeater row -->
        <?php if( have_rows('menu_sections') ): ?>
            <ul class="nav nav-tabs" role="tablist">
                <?php $row = 1; // number rows ?>
                <?php // Step 1: Loop through rows, first displaying tab titles
                while( have_rows('menu_sections') ): the_row();
                    //  ?>
                    <li role="presentation" class="list-unstyled<?php if($row == 1) {echo 'active';}?>">
                        <a
                                href="#<?php echo $row; ?>"
                                role="tab"
                                data-toggle="tab"
                        >
                            <?php the_sub_field('section_title'); ?>
                        </a>
                    </li>
    
            </ul>
    
        <?php if( have_rows('section_items') ): ?>
            <div class="tab-content">
                <?php $row = 1; // number rows ?>
                <?php // Step 2: Loop through rows, now displaying tab contents
                while( have_rows('section_items') ): the_row(); ?>
    
                    <?php // Display each item as a list ?>
                    <div class="tab-pane <?php if($row == 1) {echo 'active';}?>" id="<?php echo $row; ?>">
                        <ul>
                            <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                            <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                            <li class="list-unstyled"><?php the_sub_field('dish_price'); ?>
                        </ul>
                    </div>
                <?php $row++; endwhile; // (have_rows('section_items') ):?>
            </div>
    
        <?php endif; // (have_rows('section_items') ): ?>
    
            <?php $row++; endwhile; // (have_rows('menu_sections') ):?>
        <?php endif; // (have_rows('menu_sections') ): ?>
    </div>
    

    Now it does show the tab content but like this,
    Tabs

    As you can see the second tab is not showing properly,
    I tried to reset the rows but it didn’t work,
    Am I missing something?

    Thanks for all your help.

  • yes, you’re using the same field name in both the outer and nested row. See the comment I added to your code

    
    <div>
        <!-- Check for parent repeater row -->
        <?php if( have_rows('menu_sections') ): ?>
            <ul class="nav nav-tabs" role="tablist">
                <?php $row = 1; // number rows ?>
                <?php // Step 1: Loop through rows, first displaying tab titles
                while( have_rows('menu_sections') ): the_row();
                    //  ?>
                    <li role="presentation" class="list-unstyled<?php if($row == 1) {echo 'active';}?>">
                        <a
                                href="#<?php echo $row; ?>"
                                role="tab"
                                data-toggle="tab"
                        >
                            <?php the_sub_field('section_title'); ?>
                        </a>
                    </li>
    
            </ul>
    /***************************************************************
    The field name used in the outer loop should be menu_sections just
    like the above loop. You may also need to reset_rows() here.
    ***************************************************************/
        <?php if( have_rows('section_items') ): ?>
            <div class="tab-content">
                <?php $row = 1; // number rows ?>
                <?php // Step 2: Loop through rows, now displaying tab contents
                while( have_rows('section_items') ): the_row(); ?>
    
                    <?php // Display each item as a list ?>
                    <div class="tab-pane <?php if($row == 1) {echo 'active';}?>" id="<?php echo $row; ?>">
                        <ul>
                            <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                            <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                            <li class="list-unstyled"><?php the_sub_field('dish_price'); ?>
                        </ul>
                    </div>
                <?php $row++; endwhile; // (have_rows('section_items') ):?>
            </div>
    
        <?php endif; // (have_rows('section_items') ): ?>
    
            <?php $row++; endwhile; // (have_rows('menu_sections') ):?>
        <?php endif; // (have_rows('menu_sections') ): ?>
    </div>
    
  • I did everything as you specified and got these results,

    Rows

    Thanks,

  • I reorganized your code a bit so that I could better see what was going on, for me it makes it a little clearer. This is what I came up with. Hopefully you can see the changes I made to the logic.

    
    <div>
      <!-- Check for parent repeater row -->
      <?php 
        if (have_rows('menu_sections')) {
          ?>
            <ul class="nav nav-tabs" role="tablist">
              <?php 
                $row = 1; // number rows 
                // Step 1: Loop through rows, first displaying tab titles
                while( have_rows('menu_sections') ) {
                the_row();
                  ?>
                    <li role="presentation" class="list-unstyled<?php 
                        if($row == 1) {echo 'active';}?>">
                      <a href="#<?php 
                          echo $row; ?>" role="tab" data-toggle="tab"><?php 
                          the_sub_field('section_title'); ?></a>
                    </li>
                  <?php 
                  $row++;
                } // end while have rows
              ?>
            </ul>
          <?php 
          reset_rows();
          ?>
            <div class="tab-content">
              <?php 
                $row = 1; // number rows
                // Step 2: Loop through rows, now displaying tab contents
                while (have_rows('menu_sections')) {
                  the_row();
                  ?>
                    <div class="tab-pane <?php 
                        if($row == 1) {echo 'active';}?>" id="<?php echo $row; ?>">
                      <?php 
                        while (have_rows('section_items')) {
                          the_row();
                          // Display each item as a list
                          ?>
                            <ul>
                              <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                              <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                              <li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
                            </ul>
                          <?php 
                          $row++;
                        } // end while have rows section_items
                      ?>
                    </div>
                  <?php 
                } // end wile have rows menu_sections  
              ?>
            </div>
          <?php 
        } // end if have rows
      ?>
    </div>
    
  • Thanks John!
    Yes I’ve seen the changes and the only thing I noticed is that when you put one item on each tab works fine but if you add more items to one of them the following one won’t work.
    I think its got something to do with the ID tag.

    I appreciate all your help.
    Thanks very much,

  • That could have something to do with the bootstrap stuff that I’m not all that familiar with and probably won’t be much help with.

    But the loops are where they need to be I think.

    — loop though the top level repeater and create the link list
    —- create a list item for each row

    — loop through it again to create the sections
    —- create a section
    —— loop through nested repeater to get content for that section and output

  • Thanks John,
    Yes everything works great, I will look into Bootstrap and let you know as soon as I find the problem.

    Thank you so much!

  • Hi John!
    I got this to work 100%, I had to make a few changes but now works great
    this is the code in case someone needs it,

    
    <div>
        <?php
    
        if( have_rows('menu_sections') ): ?>
            <ul class="nav nav-tabs" id="" role="tablist">
                <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
                    <?php
                    $string = sanitize_title( get_sub_field('section_title') );
                    ?>
                    <li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
                        <a>" aria-controls="<?php echo $string ?>" role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
                    </li>
                    <?php $i++; endwhile; ?>
            </ul>
            <div class="tab-content">
                <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
                    <?php
                    $string = sanitize_title( get_sub_field('section_title') );
                    ?>
                    <div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
                        <?php
                        while (have_rows('section_items')) {
                            the_row();
                            // Display each item as a list
                            ?>
                            <ul>
                                <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                                <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                                <li class="list-unstyled">$<?php the_sub_field('dish_price'); ?></li>
                            </ul>
                            <?php
                        } // end while have rows section_items
                        ?>
    
                    </div>
                    <?php $i++; endwhile; ?>
            </div>
        <?php endif; ?>
    </div>
    

    Thanks for all your help.

  • Hi, I used your code but was having issues. I was able to solve it using:

    echo '<ul class="nav nav-pills" id="pills-tab" role="tablist">';
    
    		$child_repeater = get_field('section_two');
    
    		//$count=0;
    		//// first loop
    		foreach($child_repeater as $item) {
    
    		    $tab_title = $item['tab_heading'];
    
    		    $tab_id = str_replace(' ', '-', strtolower( $tab_title ) ); 
    
    		    if (!is_null($tab_title)) {
    		 
    			 	echo '<li class="nav-item"><a class="nav-link ';
    
    			 	if( !$count) {
    
    			     	echo 'active';
    
    			    } 
    
    			    echo  '" href="#pills-' . $tab_id . '" data-toggle="tab" id="pills-"' . $tab_id . '"  aria-controls="' . $tab_id . '"  aria-expanded="true">' . $tab_title . '</a></li>';
    
    			    $count++;
    		    }
    		}
    
    	echo '</ul>';
    
    echo '</div>';
    
    echo '<div class="tab-content col-12" id="pills-tabContent">';
    
    	$i=0;
    	// second loop
    	foreach($child_repeater as $item) {
    
    	    $tab_title = $item['tab_heading'];
    
    	    $tab_id = str_replace(' ', '-', strtolower( $tab_title ) );
    
    	    $image = $item['tab_image'];
    	    
    	    $content = $item['tab_content'];
    
    	    if (!is_null($content)) {
    
    		    echo '<div class="tab-pane fade ';
    		    if( !$i) {
    		     	echo 'show active';
    		    } 
    		    echo '" id="pills-' . $tab_id . '">';
    
    			    echo '<div class="card mb-3">';
    			    
    			    	echo '<img src="' . $image . '" alt="' . $tab_title . ' ">';
    
    			    	echo '<div class="card-body">';
    
    			    		echo  $content;
    
    			    	echo '</div>'; 
    
    			    echo '</div>'; 
    
    		    echo '</div>'; 
    
    		    $i++;
    		 }
    	}
Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Nested Repeater Bootstrap Tabs’ is closed to new replies.