I have developed a content management system with PHP. I would like to use the bootstrap modal to list the data from a recordset. A short blurb is displayed with a button, that when clicked, should open the modal and display the details based on the ID of the record.
My issue is that three records are being displayed. When I click on each of the three buttons, only the first record is being displayed in the modal window. Reading and implementing many of the solutions has unfortunately not help me to achieve the objectives.
My Button:
<ul class="bullet">
<li class="bullet"><?php echo $row_rsEvents['eventBlurb']; ?>
<button type="button" class="btn btn-custom pull-right" data-toggle="modal" data-id="<?php echo $row_rsEvents['eventID']; ?>" data-target="#myModal1" >Read More ...</button>
My Modal:
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title" id="myModalLabel1"><?php echo $row_rsEvents['eventTitle']; ?></h1>
</div>
<div class="modal-body">
<div class="row">
<div id="eventHolder" class="col-sm-12">
<div class="col-sm-7"><?php echo $row_rsEvents['eventContent']; ?></div>
<div class="col-sm-5 pull-right">
<div><img src="img/events/<?php echo $row_rsEvents['eventPhoto']; ?>" alt="ALT"></div>
<div><?php echo $row_rsEvents['eventPhotoCaption']; ?></div>
</div></div></div></div>
<div class="modal-footer"><div class="pull-left"><?php echo(($row_rsEvents['eventDate'])?date('d M Y',strtotime($row_rsEvents['eventDate'])):'') ; ?></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div></div></div>
I have read many of the posts trying to find a solution and implement. Unfortunately, I'm lacking the JavaScript and jQuery knowledge to get my modal working.
I greatly appreciate any help and solutions