使用Get php功能启动Bootstrap弹出模式

Question

please help me.. i am having a trouble with the popup modal.. how to get a certain data/value and display it to the modal.. I dynamically fetch a data from database and display it to html form, when i clicked one of the displayed item the modal popup should show containing the said description. 请帮助我..我在弹出模式中遇到麻烦..如何获取某个数据/值并将其显示为模式..当我单击数据库时，我从数据库中动态获取数据并将其显示为html形式在显示的项目中，模态弹出窗口应显示包含上述说明。 My problem is that when I clicked one of the items it popup the modal but it contains all the data that is not related to the item that i Clicked. 我的问题是，当我单击其中一个项目时，它会弹出模态，但其中包含与我单击的项目无关的所有数据。

Example i fetched form database this 2 items below (see pictures below), 示例我从下面这两个项目中获取了表单数据库（请参见下图）， when i clicked one of them the popup modal should show containing the said value like below 当我单击其中之一时，弹出模态应显示为包含如下所示的值 but i am having a trouble when i clicked one of them it show all the description with the other item like below 但是当我单击其中一个时，我遇到了麻烦，它显示了与其他项目一样的所有描述，如下所示 my code is here 我的代码在这里

 <script type="text/javascript"> $(function () { $("#btnShow").click(function(){ $.ajax({ url: 'prologue.php?story=$row[title]', method: 'get', success: function(data) { $(".modal-body").html(data); }, error:function(xhr,code,text){ alert("error occoured : "+text); } }); $('#demoModal').modal('show'); }); }); </script>

 <!DOCTYPE html> <html> <head> <title>Compiled Story</title> <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" > <link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <link rel="shortcut icon" href="../logo.png"> </head> <body> <table class="story-albums-lib" style="margin-left: 250px;"> <?php $con=mysqli_connect("localhost","root","","scenezone"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $sql = "SELECT * FROM create_story WHERE title 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><a href='prologue.php?story=$row[title]'><img src='../stories/" .$row['image']."' alt='Image' id='btnShow' style='width: 200px; height: 250px; border-radius: 8px;'></a> <br><p id='btnShow' style='margin-left:50px;'>".$row["title"]."</p> </td>"; if ($i % 5 == 4) { echo "</tr>"; } $i++; } // Free result set mysqli_free_result($result); mysqli_close($con); ?> </div> <!-- Modal --> <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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> <h4 class="modal-title" id="myModalLabel"><?php echo $row ['email'];?></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="btnchapterlist" class="btn btn-primary">Start Reading</button> </div> </div> </div> </div> </table> </div> </body> </html>

here is my prologue.php 这是我的prologue.php

 <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "scenezone"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT * FROM create_story WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<center>"; echo "<tr>"; echo "<td><img src='../stories/".$row['image']."' alt='Image' class='img-responsive;' style='width: 200px; height: 250px;'> <br><p> Title: ".$row["title"]." <br>Genre : ".$row["genre"]." <br>Author : ".$row["pen_name"]." <br>Prologue : ".$row["description"]."</p> </td>"; echo "</tr>"; echo "</center>"; } } else { echo "0 results"; } $conn->close(); ?>

Answer 1

Did you have tried to use a foreach() or a for() loop to populate your modal? 您是否尝试过使用foreach()或for()循环来填充模态？ Consider also to use an $.each() inside the success function of your ajax request. 还考虑在ajax请求的成功函数内使用$.each() 。

EDIT: As requested here is how i will try to fetch the needed data, I will not include the prepared statements , this is not a problem during the develop of your page, but you need to implement them in the release version for security reason. 编辑：按照这里的要求，我将尝试获取所需的数据，我将不包括准备好的语句，这在页面开发过程中不是问题，但是出于安全原因，您需要在发行版中实现它们。

<?php
$con=mysqli_connect("localhost","root","","scenezone");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql = "SELECT * FROM create_story
WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";

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

// Fetch all
foreach($result as $row):
$title = $row[title];    
$email = $row['email'];
$image = $row['image'];

?>
<!DOCTYPE html>
<html>
<head>
    <title>Compiled Story</title>

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

<link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="../css/font-awesome.min.css">
  <link rel="shortcut icon" href="../logo.png">


</head>
<body>

<table class="story-albums-lib" style="margin-left: 250px;">
</div>
<!-- Modal -->

<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="myModalLabel"><?php echo $email; ?></h4>
</div>
<div class="modal-body">
<tr>
<td><a href='prologue.php?story=<? echo $title; ?>'>
<img src='../stories/" .<? echo $image; ?>."' alt='Image' id='btnShow' style='width: 200px; height: 250px;  border-radius: 8px;'></a>
<br><p id='btnShow' style='margin-left:50px;'>".<? echo $title ?>."</p>    
</td>
</tr>
<? endforeach;
mysqli_free_result($result);
mysqli_close($con);?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnchapterlist" class="btn btn-primary">Start Reading</button>
</div>
</div>
</div>
</div>
</table>
</div>

</body>
</html>

使用Get php功能启动Bootstrap弹出模式

问题描述

1 个解决方案

解决方案1
0

使用Get php功能启动Bootstrap弹出模式

问题描述

1 个解决方案

解决方案1 0

解决方案1
0