带有 php 功能的弹出式模态答案

【问题标题】：Pop-up modal with php function带有 php 功能的弹出式模态
【发布时间】：2018-01-27 16:43:23
【问题描述】：

我是模态显示引导程序的新手。请有人帮助我..我的问题是如何动态获取我的表格数据并在按钮模式单击时将其显示到模式内容..我尝试搜索但我无法完美地做到这一点..

我的代码如下：

请有人帮助我...我应该使用什么？？

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/js/bootstrap.min.js"></script>
<link href="../js/js/bootstrap.min.css" rel="stylesheet" >

<script type="text/javascript">
$(function () {
$("#btnShow").click(function(){
$('#demoModal').modal('show');
});
});
</script>

<div>
<button id="btnShow">Chapter</div>

<!-- Modal -->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<h4 class="modal-title" id="myModalLabel">Chapter List</h4>
</div>
<div class="modal-body">


<!-- the possible data that should be fetch -->

  <?php
$con=mysqli_connect("localhost","root","","scenezone");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT chapter_title FROM story_chapter
WHERE story IN (SELECT story FROM story_chapter WHERE status = '1');";

$result=mysqli_query($con,$sql);

// Fetch all
$i = 0;
while($row = mysqli_fetch_array($result)){
if ($i % 5 == 0) {
echo "<tr>";
}
echo "<td><p>".$row["Chapter"]."</p>
</td>";
if ($i % 5 == 4) {
echo "</tr>";
}
$i++;
}
// Free result set
mysqli_free_result($result);

mysqli_close($con);
?>

</div>

【问题讨论】：

如果它对您有帮助，请选择答案，以便其他有相同问题的人也能从中受益
谢谢你的回答..它帮助我..
不客气，请您选择正确的答案吗？以便它可以帮助正在寻找相同解决方案的其他人。只需点击我的答案上的灰色勾号✓ 投票即可。

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

假设您正在使用简单的php 文件进行非常基础的工作。您需要显示的数据应该在.php 文件中，比如说chapters.php，当bootstrap 模态由clicking 按钮显示时，您应该使用ajax 调用该文件。

我假设你有默认的 html 结构用于引导模式，modal-body 类用于正文部分。

现在引导模式有可用于此目的的事件，您可以使用

bs.shown.modal 在模式打开之前触发。

如下绑定事件

  $('#demoModal').on('show.bs.modal', function() {
    $.ajax({
      url: 'chapters.php',
      method: 'get',
      success: function(data) {
        $(".modal-body").html(data);
      },
      error:function(xhr,code,text){
        alert("error occoured : "+text);
      }
    });
 });

【讨论】：