Loading Bootstrap modal in SQL while

Question

I have the following function

function articlesList($limit) { ?>
 <div class="table-responsive rounded mb-20">
 <table class="table table-striped table-theme">
    <thead>
         <tr>
             <th style="width: 5%;" class="text-center border-right">ID</th>
             <th style="width: 10%;" class="text-center">Image</th>
             <th style="width: 50%;">Name</th>
             <th style="width: 20%;">Date</th>
             <th style="width: 15%;" class="text-center">Actions</th>
         </tr>
    </thead>
    <tbody>
 <?php $sql = "SELECT * FROM articles ORDER BY ID DESC";
 $items = mysql_query($sql);
 while ($art = mysql_fetch_array($items)) { 
 $id = "$art[ID]"; ?>
    <tr>
        <td class="text-center border-right"><?=$art[ID]?></td>
        <td class="text-center"><img src="../media/articles/<?=$art[image]?>" class="img-bordered-theme" width="45" height="45"></td>
        <td><?=$art[name]?></td>
        <td><?=$art[date]?></td>
        <td class="text-center">
        <a href="?act=edit&amp;id=<?=$art[ID]?>" class="btn btn-success btn-sm rounded" data-toggle="tooltip" data-placement="top" data-original-title="Edit"><i class="fa fa-pencil"></i></a>
        <a href="#" class="btn btn-danger btn-sm rounded" data-toggle="modal" data-target=".remove_<?=$art[ID]?>" data-placement="top" data-original-title="Remove"><i class="fa fa-times"></i></a>
        </td>
    </tr>
     <!-- Start MODAL EVENTS -->
     <div class="remove_<?=$art[ID]?> modal fade" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-md" style="margin-top: 200px;">
             <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Remove article</h4>
                </div>
                <div class="modal-body"><p>Are you sure you want to remove the article <b><?=$art[name]?></b>?</p></div>
                 <div class="modal-footer">
                     <form name="input" action="?act=remove" method="post">
                         <input type="hidden" name="id" value="<?=$art[ID]?>">
                         <input type="hidden" name="name" value="<?=$art[name]?>">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                         <button type="submit" class="btn btn-danger">Remove</button>
                     </form>
                 </div>
             </div>
         </div>
     </div>
     <!-- End MODAL EVENTS -->
 <?php } ?>
 </tbody>
 </table>
 </div>
 <?php } //function 

My problem is with the modal box. The loading works well, all variables is passed but something is happened when the modal is opened.

Something like this:

The buttons can't be pressed, I can't close the box or do anything else.

After some tests, if I put the modal code to the bottom of the while but outside of this, the modal works great. But the variables can't be passed anymore.

Any solutions?

Answer 1

If you put the modal outside the loop, you can pass the values to modal with BS modal event function

Add a data-attribute to modal trigger button e.g data-id="<?=$art[ID]?>" and remove <?=$art[ID]?> from data-target

<a href="#" class="btn btn-danger btn-sm rounded" data-id="<?=$art[ID]?>" data-toggle="modal" data-target=".remove" data-placement="top" data-original-title="Remove"><i class="fa fa-times"></i></a>

and the second variable you have to pass to the modal is <?=$art[name]?>, add another data-attribute to it too e.g data-value="<?=$art[ID]?>"

<td><span class="name" data-value="<?=$art[ID]?>"><?=$art[name]?></span></td>

Note: you can add data-value="<?=$art[ID]?>" to any on-page element and pass it to modal.

Now the modal HTML (outside the loop) will be Note: I added <span class="Mname"></span> in modal to show the name, and added id's to input to pass the value

<!-- Start MODAL EVENTS -->
<div class="remove modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" style="margin-top: 200px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Remove article</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to remove the article <b><span class="pname"></span></b> ?</p>
            </div>
            <div class="modal-footer">
                <form name="input" action="?act=remove" method="post">
                    <input type="hidden" name="id" id="pid" value="">
                    <input type="hidden" name="name" id="pname" value="">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Remove</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End MODAL EVENTS -->

The BS Modal event listener script will be

$(document).ready(function(){ //Dom Ready
    $('.remove').on('show.bs.modal', function (e) { //Show event listener
        //Fetch val from modal button data-attribute
        var id = $(e.relatedTarget).data('id');
        //fetch name which match the data-attribute val of modal button
        var name = $('.name[data-value="' + id +'"]').html();
        //you can pass any on page variable or information to modal like this by creating more variables like `var name`
        //Now Pass it to modal
        $(".pname").html(name); 
        $("#pid").val(id);
        $("#pname").val(name);
    });
});

Fiddle Example