使用PHP记录集数据的Bootstrap 3 Modal [英] Bootstrap 3 Modal using PHP recordset data

问题描述

我已经用PHP开发了一个内容管理系统.我想使用引导程序模式来列出记录集中的数据.将显示一个带有按钮的简短内容，单击该按钮可打开模式并根据记录的ID显示详细信息.

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.

我的按钮:

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

我的模式:

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

我阅读了许多试图找到解决方案并实施的帖子.不幸的是，我缺乏JavaScript和jQuery的知识来使我的模式工作.

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

推荐答案

看到这个php我被鞭打了.这将使您的模态是唯一的，并且将基于打开的模态ID将适当的信息输入到模态中.您可以执行相同的操作以使用动态ID呼应按钮以打开模态.

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.

添加了一个连接到SQL脚本. 将查询设置为您选择查询 添加了mysql_num_rows，将其设置为$totalRows_rsEvents

Added a connect to sql script. Set query to your select query 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.  

如果没有，则可以在页面中的其他任何地方添加<?php print $modalList ?>.

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

这篇关于使用PHP记录集数据的Bootstrap 3 Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！