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
– nerdlyist, Commented Apr 14, 2016 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
– d4ne, Commented Apr 14, 2016 at 13:08

Shehary · Accepted Answer · 2016-04-14 13:37:17Z

2

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>

answered Apr 14, 2016 at 13:37

Shehary

9,99810 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

d4ne Over a year ago

Thank you, got it working with the help of your explanation.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related