I have a script called widgets.php which basically inserts tabs of content into several modals on my page. Visually this works, but since there are multiple modals on my page this is only 'functional' for the first modal on the page. I'm thinking I need to append a loop to this script below so that whatever modal it's in it will append a unique number to the div IDs
I've put an iterator id $n_id
, echoed it on the div IDs and their call in the tab header, and incremented it at the end of the script, but now I'm stuck on how exactly I need to loop on this.
Basically once something is selected it goes into another div with it's own ID for database insert so I don't need to worry about that. I just need to make sure that if the page has 4 modals with this feature, each one's tab call will work for that individual modal.
The script:
widgets.php
//create iterator to add ID
<?php $n_id = 0;>
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a data-toggle="tab" class="nav-link active" href="#images<?php echo $n_id?>">
<h3>Images</h3></a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#widgets<?php echo $n_id?>"><h3>Widgets</h3></a>
</li>
</ul>
<div class="tab-content">
<div id="images<?php echo $n_id?>" class="tab-pane fade show active">
<?php foreach ($imageResult as $im): ?>
<?php if($im['type'] == 'content'){?>
<img src="<?php echo $im['url']; ?>" style="max-width:200px; max-height:200px;">
<?php } ?>
<?php endforeach?>
</div>
<div id="widgets<?php echo $n_id?>" class="tab-pane fade">
</div>
</div>
<?php $n_id++;?>
testPage.php
<div class="modal">
<?php include 'widgets.php'?>
</div>