Php foreach array index HTML modal? Use PHP variables inside modal? - php

Question

In my code I'm returning a array of items/designs which im previewing using HTML as you can see in the following screenshot:
Once I'm clicking on a item/design a form modal will popup and offer the user some selects and input fields.
The code looks like the following:
<?php foreach($designs as $design): ?>
<!-- HTML code to display designs which are returned from a PHP class -->
<?php endforeach; ?>
<div id="modal_form_vertical" class="modal fade">
<!-- Modal HTML code -->
</div>
As you can see I'm storing the modal code outside the foreach loop.
Since I'm able to click different items/designs I'm not sure how to use the urls/names/ids which are returned by the index position of the array.
Question: How would I use the PHP variables which are aviable inside the foreach loop inside the modal? Do I really have to create a modal foreach design/items by placing the modal code inside the foreach loop?

Answer 1

What you need is to add the variable to the modal trigger button as data attribute against which you can fetch or retrieve the relative information from database via modalevent listener & ajax method
Modal trigger buttorn
<?php foreach($designs as $design): ?>
<button data-toggle="modal" data-target="#modal_form_vertical" data-designid="<?php echo $variableId;?>" class="btn btn-default">Modal</button>
<?php endforeach; ?>
Modal event listener & Ajax method
$(document).ready(function(){
$('#modal_form_vertical').on('show.bs.modal', function (e) {
var designid = $(e.relatedTarget).data('designid'); //get the id
alert(designid);
var dataString = 'designid=' + designid;
$.ajax({
type: "POST",
url: "includes/design_content.php",
data: dataString,
cache: false,
success: function(data){
$("#designcontent").html(data);
}
});
});
});
Create design_content.php
<?php
//Include DatabaseConnection
//$_POST['designid'];
//Run query
//Fetch Data
//Echo data to show in Modal
?>
Modal HTML
<div id="modal_form_vertical" class="modal fade">
<!-- Modal HTML code -->
<div id="designcontent"></div> //Here will show the data fetched via ajax.
</div>