Support

Account

Home Forums Add-ons Repeater Field Bootstrap Modal Pop

Solving

Bootstrap Modal Pop

  • HI, I’ve been going around on this one for a few hours now, getting myself more and more confused by the logic. I’m sure its straight forward but for the life of me I’m hitting a wall.
    The scenario, I’m using wp and bootstrap on an existing theme that I’m altering, what I’m attempting to do is use repeater fields to generate a series of boxes (got that bit covered) and then show the extended copy, also a repeater field within a modal popup.

    To describe in more detail. I have the following fields set up, title(text), development_stage(text), icon(image), box_color(select), main copy (textarea)
    The thought process was to have title and development stage along with icon in box, using the select(box-color) to choose the color of box, then have a link to open the popup that would display all the fields including the main-copy in a modal popup. More specifically, if you hit box 1 it would open the modal with the long copy for that repeater row, box 2 would show the copy from repeater row 2 and so on and so forth.

    Seems simple but as I say it’s pickling my brain.

    The first bit seemed easy and I’ve output my grid of boxes using the following;

    <?php if(get_field('baby_grid')): ?>
    	<ul>
    	<?php while(has_sub_field('baby_grid')): ?>
    		<li style="background-color:<?php the_sub_field('box_color'); ?>"class="col-md-4"><?php the_sub_field('development_stage'); ?>, <img src="<?php the_sub_field('icon'); ?>"/><a href="#" data-toggle="modal" data-target="#myModal">toggle goes here</a>
    		</li>
    	<?php endwhile; ?>
    	</ul>
    
    <?php endif; ?>

    It’s when I try and pass all that to the modal that things are not working. I’m using the following code to pass the info to the modal.

    <!-- Modal -->
    <div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
      <div class="modal-dialog" >
        <div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"><?php the_sub_field('development_stage'); ?></h4>
          </div>
          <div class="modal-body">
            <p><?php the_sub_field('main_copy'); ?></p>
          </div>
          <!-- <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div> -->
        </div>
      </div>
    </div>

    I’ve got the grid bit to output ok at the moment, I haven’t managed to get the modal to pass the individual items per row. All I seem to be able to do is click on any box and it passes the first entry to the main copy area.

    That’s where I’ve gotten to, any help would be greatly appreciated.

    Thanks,

    John

  • Hi @j_pocapoc

    Because there are multiple ‘modals’ on the page, you need each ‘toggle’ to refer to a separate modal.

    All you need to do is place the ‘modal’ code within another repeater field loop

    Then make sure your id’s match like so:

    
    <?php if(get_field('baby_grid')): $i = 0; ?>
    	<ul>
    	<?php while(has_sub_field('baby_grid')): $i++; ?>
    		<li style="background-color:<?php the_sub_field('box_color'); ?>"class="col-md-4"><?php the_sub_field('development_stage'); ?>, <img src="<?php the_sub_field('icon'); ?>"/><a href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">toggle goes here</a>
    		</li>
    		
    	<?php endwhile; ?>
    	</ul>
    
    <?php endif; ?>
    
    <?php if(get_field('baby_grid')): $i = 0; ?>
    
    	<?php while(has_sub_field('baby_grid')): $i++; ?>
    		
    		<!-- Modal -->
    		<div class="modal fade col-md-4" id="myModal-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    		  <div class="modal-dialog" >
    		    <div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
    		      <div class="modal-header">
    		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    		        <h4 class="modal-title" id="myModalLabel"><?php the_sub_field('development_stage'); ?></h4>
    		      </div>
    		      <div class="modal-body">
    		        <p><?php the_sub_field('main_copy'); ?></p>
    		      </div>
    		      <!-- <div class="modal-footer">
    		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    		        <button type="button" class="btn btn-primary">Save changes</button>
    		      </div> -->
    		    </div>
    		  </div>
    		</div>
    		
    	<?php endwhile; ?>
    	
    <?php endif; ?>
    
  • This is brilliant. Thanks.

  • I have a similar issue, but I’m trying to separate several arrays on a page while showing collapsible repeaters (arrow icon to expand additional information). I’m using Bootstrap cards to show the custom posts in a grid of cards. It was also coded as a shortcode.

    The issue I’m having is that only one of my expandable card sections is working but not the ones with the arrays. This page works: http://dev-une-online-testing.pantheonsite.io/about/about-owl/

    This page does not work. I’m not seeing the icon to expand the repeater content: http://dev-une-online-testing.pantheonsite.io/about/about-owl/academic-programs/

    Is it a counting issue? or are the arrays nested incorrectly? The working snippet is the last section in the <?php } else { ?> section. Any ideas? I’ve been banging my head on this for days!

    <?php 
    function owl_shortcode($atts) {
    	ob_start();
    
    	extract(shortcode_atts (array(
    	    'category' => '',
    	    'name' => '',
    	    'orderby' => 'title'	
    	), $atts));
    						
    	if ($category) {
    		$cats = explode(",", $category);	
    		$array = array();
    		for ($i = 0; $i < count($cats); ++$i) {
    		$array[] = get_category_by_slug($cats[$i])->term_id;
    		}
    		
    		$custom_query = new WP_Query( array( 
    			'category__and' => $array,
    			'post_type' => 'owl',
    			'orderby'   => $orderby,
    			'order'     => 'ASC',
    			'posts_per_page' => -1 
    		));	
    	}
    	else {
    		$custom_query = new WP_Query( array( 
    			'post_type' => 'owl',
    			'orderby'   => $orderby,
    			'order'     => 'ASC',
    			'posts_per_page' => -1 
    		));			
    	}
    	?>	
    	
    <div class="row">	
    <ul class="none">
    
    <?php if ( $custom_query->have_posts() ): while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
    		<div class="col-sm-6">
    			<li class="card containFloat">
    				<?php //image ?>
    				<div class="circle">
    					<?php $image = get_field('image');
    					if( !empty($image) ): 
    						$size = 'thumbnail';
    						$thumb = $image['sizes'][ $size ]; ?>
    						<img src="<?php echo $thumb; ?>" alt="<?php echo $image['alt']; ?>"  /> 
    					<?php else: ?>
    						<img src="https://online.une.edu/wp-content/uploads/2018/06/blank-female-profile.jpg" alt="" height="150px" width="150px"/>
    					<?php endif; ?>
    				</div>
    				
    				<?php if (in_array("program-administrator", $cats) || in_array("program-manager", $cats) || in_array("program-staff", $cats)) { ?>
        				<div class="containFloat">
        					<h2 class="margin-top">
            				<?php the_title(); ?>
            				<?php if (get_field('degree')) echo ', ' . get_field('degree'); ?>
            				</h2>
    						<p><?php the_field('job_title'); ?></p>
                            <p><i class="fas fa-phone"></i> <?php the_field('phone'); ?> </p>
                            <p><a href="mailto:<?php the_field('email'); ?>"><i class="fas fa-envelope-open"></i> <?php the_field('email'); ?></a></p>
                       		<br>
        				</div>  
        				  
            			<?php if (in_array("program-administrator", $cats) || in_array("program-manager", $cats)) { ?>						
        					<div class="clearBoth">
    							
    <!--- Accordion Expander - Shortcode Test - Program Administrator / Program Manager --->	
    				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                       <?php
                       //$uniqueid = get_sub_field( 'collapser' );
                       $uniqueid = uniqid('collapser');
                       $count = 0;
                       while ( have_rows( 'collapser' ) ) : the_row(); ?>
                       <div class="panel panel-default listbox">
                    	<div class="panel-heading" role="tab" id="headingTwo">
          			 	<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" aria-expanded="false">
                           <?php the_sub_field( 'expand_row') ?>
                        </a>
                    </div>
                    <div id="collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>"
                        class="panel-collapse collapse" role="tabpanel">
                       <div class="panel-body">
                        <?php if (get_sub_field('description')) { ?>
    					<div class="panel-text"><b>More info</b><?php the_sub_field('description'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('education')) { ?>
    					<div class="panel-text"><b>Education</b><?php the_sub_field('education'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('expertise')) { ?>
    					<div class="panel-text"><b>Expertise</b><?php the_sub_field('expertise'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('experience')) { ?>
    					<div class="panel-text"><b>Experience</b><?php the_sub_field('experience'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('research')) { ?>
    					<div class="panel-text"><b>Research Interests</b><?php the_sub_field('research'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('publications')) { ?>
    					<div class="panel-text"><b>Publications</b><?php the_sub_field('publications'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('bio')) { ?>
    					<div class="panel-text"><b>Bio</b><?php the_sub_field('bio'); ?></div>
    					<?php } ?>
                    </div>
                </div>
            </div>
    				
            <?php $count ++; ?>
        <?php endwhile; ?>
    </div>
    				</div>
                        <?php } ?> 
                        
    				<?php } else { ?>
        				<div class="containFloat">
        					<h2><?php the_title(); ?></h2>
        					<p><?php the_field('job_title'); ?></p>
        					<p><i class="fas fa-phone"></i> <?php the_field('phone'); ?> </p>
        					<p><i class="fas fa-envelope-open"></i> <a href="mailto:<?php the_field('email'); ?>"> <?php the_field('email'); ?></a></p><br>
        				</div>
    				
    				
    <!--- Accordion Expander - OWL.php --->	
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                       <?php
                       //$uniqueid = get_sub_field( 'collapser' );
                       $uniqueid = uniqid('collapser');
                       $count = 0;
                       while ( have_rows( 'collapser' ) ) : the_row(); ?>
                       <div class="panel panel-default listbox">
                        <div class="panel-heading" role="tab" id="headingTwo">
     
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" aria-expanded="false">
                            <?php the_sub_field( 'expand_row' ) ?>
                            </a>
    
                    </div>
                    <div id="collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>"
                        class="panel-collapse collapse" role="tabpanel">
                       <div class="panel-body">
                       <?php if (get_sub_field('description')) { ?>
    					<div class="panel-text"><b>More info</b><?php the_sub_field('description'); ?></div>
    					<?php } ?>
                        <?php if (get_sub_field('expertise')) { ?>
    					<div class="panel-text"><b>Expertise</b><?php the_sub_field('expertise'); ?></div>
    					<?php } ?>
                    </div>
                </div>
            </div>
            <?php $count ++; ?>
    
        <?php endwhile; ?>
    
    </div>
    <!--- End Accordion --->	
    				
                    <?php } ?>
    			
    			</li>
    		</div>
    	
    		<?php endwhile; endif; ?>	
    </ul>	
    	</div>					 
    <?php 
    wp_reset_query(); 
    return ob_get_clean();
    }
    ?>
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Bootstrap Modal Pop’ is closed to new replies.