弹出模式与PHP功能

时间:2018-01-27 16:43:23

标签: javascript php jquery twitter-bootstrap

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

我的代码如下:

请有人帮助我......我该怎么用?

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

1 个答案:

答案 0 :(得分:0)

假设您正在使用简单php文件工作的基本级别。您需要显示的数据应位于.php文件中,例如chapters.php,当ajax模式显示为bootstrap时,您应使用clicking调用该文件1}}一个按钮。

我假设你有一个默认的html结构用于bootstrap模式,而body部分的modal-body类。

现在,bootstrap模式具有可用于此目的的事件,您可以使用

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);
      }
    });
 });