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

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?

Have you looked into doing this with Ajax rather then building the modals in PHP? — nerdlyist, Apr 14 '16 at 12:55
No I didn't yet. Actually the PHP code is just previewing the items/designs, the modal itself is just HTML code yet. Since I have no clue how to use the PHP variables in there since I don't want to have a modal foreach array index in my source code. I would want to have one modal, changing their values on select of the item/design. — d4ne, Apr 14 '16 at 13:08

score 2 · Accepted Answer · answered Apr 14 '16 at 13:37

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>

Thank you, got it working with the help of your explanation. — d4ne, Apr 15 '16 at 13:11

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

1 Answers1