Bootstrap 3 Modal Using Php Recordset Data

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 whe

Solution 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 .= '<divclass="modal fade"id="myModal'.$id = $row_rsEvents["id"].'" tabindex="-1"role="dialog"aria-labelledby="myModalLabel1"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h1class="modal-title"id="myModalLabel1">'.$row_rsEvents['eventTitle'].'</h1></div><divclass="modal-body"><divclass="row"><divid="eventHolder"class="col-sm-12"><divclass="col-sm-7">'.$row_rsEvents['eventContent'].'</div><divclass="col-sm-5 pull-right"><div><imgsrc="img/events/'.$row_rsEvents['eventPhoto'].'"alt="ALT"></div><div>'.$row_rsEvents['eventPhotoCaption'].'</div></div></div></div></div><divclass="modal-footer"><divclass="pull-left">'.(($row_rsEvents['eventDate'])?date('d M Y',strtotime($row_rsEvents['eventDate'])):'').'</div><buttontype="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.

Solution 2:

My PHP Code for my button and modal:

<divclass="news-events"style="clear:both; "><h1class="light-grey tm">WHATS ON?</h1><?phpdo { ?><divid="event-holder"><h4><?phpecho(($row_rsEvents['eventDate'])?date('d M Y',strtotime($row_rsEvents['eventDate'])):'') ; ?></h4><ulclass="bullet"><liclass="bullet"><?phpecho$row_rsEvents['eventBlurb']; ?><buttontype="button"class="btn btn-custom pull-right"data-toggle="modal"data-id="<?phpecho$row_rsEvents['eventID']; ?>"data-target="#myModal1" >Read More ...</button></li><divclass="clearfix"></div><divclass="modal fade"id="myModal1"tabindex="-1"role="dialog"aria-labelledby="myModalLabel1"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h1class="modal-title"id="myModalLabel1"><?phpecho$row_rsEvents['eventTitle']; ?></h1></div><divclass="modal-body"><divclass="row"><divid="eventHolder"class="col-sm-12"><divclass="col-sm-7"><?phpecho$row_rsEvents['eventContent']; ?></div><divclass="col-sm-5 pull-right"><div><imgsrc="img/events/<?phpecho$row_rsEvents['eventPhoto']; ?>"alt="ALT"></div><div><?phpecho$row_rsEvents['eventPhotoCaption']; ?></div></div></div></div></div><divclass="modal-footer"><divclass="pull-left"><?phpecho(($row_rsEvents['eventDate'])?date('d M Y',strtotime($row_rsEvents['eventDate'])):'') ; ?></div><buttontype="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?

Solution 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.