Bootstrap 3 Modal using PHP recordset data

Question

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">&times;</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

Answer 1

See this php i whipped up. This would make your modals unique and the appropriate information would be inputted into the modal based on which modal id is open. you could do the same to echo the buttons to open the modal using the dynamic id.

EDIT: Added a connect to sql script. EDIT: Set query to your select query EDIT: Added mysql_num_rows, set it to $totalRows_rsEvents

$db_host = "host url"; 
$db_username = "username"; 
$db_pass = "password"; 
$db_name = "database name"; 
mysql_connect("$db_host","$db_username","$db_pass"); 
mysql_select_db("$db_name");

$modalList = '';
$rsEvents = mysql_query("SELECT * FROM ri_Events WHERE eventPromote AND eventStatus = '1' ORDER BY eventDate ASC");
$totalRows_rsEvents = mysql_num_rows($rsEvents);
while($row_rsEvents = mysql_fetch_array($rsEvents)){
$modalList .= '<div class="modal fade" id="myModal'.$id = $row_rsEvents["id"].'" 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">&times;</button>
<h1 class="modal-title" id="myModalLabel1">'.$row_rsEvents['eventTitle'].'</h1>
</div>
<div class="modal-body">
<div class="row">
<div id="eventHolder" class="col-sm-12">
<div class="col-sm-7">'.$row_rsEvents['eventContent'].'</div>
<div class="col-sm-5 pull-right">
<div><img src="img/events/'.$row_rsEvents['eventPhoto'].'" alt="ALT"></div>
<div>'.$row_rsEvents['eventPhotoCaption'].'</div>
</div></div></div></div>
<div class="modal-footer"><div class="pull-left">'.(($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>';
}

print $modalList; // since a modal isnt visible in bootstrap until opened this should be acceptable.  

if not, you can add <?php print $modalList ?> anywhere else in the page.

Answer 2

My PHP Code for my button and modal:

<div class="news-events" style="clear:both; ">
<h1 class="light-grey tm">WHATS ON?</h1>
<?php do { ?>
<div id="event-holder">
<h4><?php echo(($row_rsEvents['eventDate'])?date('d M Y',strtotime($row_rsEvents['eventDate'])):'') ; ?></h4>
<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>
</li>
<div class="clearfix"></div> 
<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">&times;</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> 
</ul>
</div><!-- event-holder -->
<?php } while ($row_rsEvents = mysql_fetch_assoc($rsEvents)); ?>
</div><!-- end-news-events -->

Recordset code in previous answer. Do you need anything esle?

Answer 3

MY IMPLEMENTATION AND RESULTS

When I click on button to open model nothing happens.

I did some debugging on your edited code, results below

101 $totalRows_rsEvents = mysql_num_rows($rsEvents);
102 var_dump($modalList);
103 while($row_rsEvents = mysql_fetch_array($rsEvents)){

string(0) ""

---

101 $totalRows_rsEvents = mysql_num_rows($rsEvents);
102 var_dump($rsEvents);
103 while($row_rsEvents = mysql_fetch_array($rsEvents)){

resource(13) of type (mysql result)

---

101 $totalRows_rsEvents = mysql_num_rows($rsEvents);
102 var_dump($totalRows_rsEvents);
103 while($row_rsEvents = mysql_fetch_array($rsEvents)){

int(3)

---

I tested my original recordset I used for my modal button.

40 $totalRows_rsEvents = mysql_num_rows($rsEvents);
41 var_dump($row_rsEvents);

array(9) { ["eventID"]=> string(1) "1" ["eventTitle"]=> ...

Working well.

So next I wanted to debug the new connection code supplied

83 mysql_connect("$db_host","$db_username","$db_pass"); 
84 mysql_select_db("$db_name");
85 var_dump($db_host, $db_username, $db_pass, $db_name);

string(9) "localhost" string(4) "root" string(0) "" string(8) "roll_db5"

Next test

88 $totalRows_rsEvents = mysql_num_rows($rsEvents);
89 var_dump($totalRows_rsEvents);

int(3)

Next test

88 $totalRows_rsEvents = mysql_num_rows($rsEvents);
89 var_dump($rsEvents);

resource(12) of type (mysql result)

Lastly I notice a difference:

My button data-target="#myModal1"

Your $modalList id="myModal'.$id =

Should your id not be id="myModal1'.

I changed but made no difference. Modal still not opening.

Any further suggestions please. Rather desperate to get this working.