На моем веб-сайте, когда нажимается кнопка, она будет вызывать всплывающее окно. Im использует модальное всплывающее окно. Моя проблема в том, что я не могу получить правильные данные, которые извлекаются на основе идентификатора кнопки. Ниже мой код: Таблица html:
<tbody> <?php $counter = 1; $data = "SELECT * FROM family"; $result = $conn->query($data); while($ser=mysqli_fetch_array($result)) { ?> <tr> <td><center><?php echo $counter; $counter++; ?></center></td> <td><center><?php echo $ser['fam_id'];?></center></td> <td><center><?php echo $ser['fam_name']; ?></center></td> <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
Основным fam_id
является fam_id
.
Затем ниже приведен код модального всплывающего окна
<!-- Modal --> <form id="form1" method="post"> <div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4> </div> <div class="modal-body"> <b>Details</b> <hr></hr> Address: <?php echo $ser['fam_add']; ?><p></p> Phone_num: <?php echo $ser['fam_phone']; ?><p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </form>
Более того, я делаю их в одном файле. В заключение, это выглядит так:
<tbody> <?php $counter = 1; $data = "SELECT * FROM family"; $result = $conn->query($data); while($ser=mysqli_fetch_array($result)) { ?> <tr> <td><center><?php echo $counter; $counter++; ?></center></td> <td><center><?php echo $ser['fam_id'];?></center></td> <td><center><?php echo $ser['fam_name']; ?></center></td> <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center> <!-- Modal --> <form id="form1" method="post"> <div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4> </div> <div class="modal-body"> <b>Details</b> <hr></hr> Address: <?php echo $ser['fam_add']; ?><p></p> Phone_num: <?php echo $ser['fam_phone']; ?><p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </form> </td> </tr> <?php } ?> </tbody>
в<tbody> <?php $counter = 1; $data = "SELECT * FROM family"; $result = $conn->query($data); while($ser=mysqli_fetch_array($result)) { ?> <tr> <td><center><?php echo $counter; $counter++; ?></center></td> <td><center><?php echo $ser['fam_id'];?></center></td> <td><center><?php echo $ser['fam_name']; ?></center></td> <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center> <!-- Modal --> <form id="form1" method="post"> <div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4> </div> <div class="modal-body"> <b>Details</b> <hr></hr> Address: <?php echo $ser['fam_add']; ?><p></p> Phone_num: <?php echo $ser['fam_phone']; ?><p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </form> </td> </tr> <?php } ?> </tbody>
<tbody> <?php $counter = 1; $data = "SELECT * FROM family"; $result = $conn->query($data); while($ser=mysqli_fetch_array($result)) { ?> <tr> <td><center><?php echo $counter; $counter++; ?></center></td> <td><center><?php echo $ser['fam_id'];?></center></td> <td><center><?php echo $ser['fam_name']; ?></center></td> <td> <center> <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>"> <button class="btn btn-primary btn-sm"> Edit Attendance Status </button> </a> </center>
в<tbody> <?php $counter = 1; $data = "SELECT * FROM family"; $result = $conn->query($data); while($ser=mysqli_fetch_array($result)) { ?> <tr> <td><center><?php echo $counter; $counter++; ?></center></td> <td><center><?php echo $ser['fam_id'];?></center></td> <td><center><?php echo $ser['fam_name']; ?></center></td> <td> <center> <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>"> <button class="btn btn-primary btn-sm"> Edit Attendance Status </button> </a> </center>
Поместите этот код в footer.php или на конец этой страницы.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div>
Назовите свой «somepage.php» (отдельная страница. Где модальное тело присутствует) через ajax. Поместите этот <script></script>
в свой JS- файл.
<script> $('.modalLink').click(function(){ var famID=$(this).attr('data-id'); var famAddr=$(this).attr('data-addr'); var famPhone=$(this).attr('data-phone'); var famName=$(this).attr('data-name'); $.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){ $(".modal-content").html(result); }}); }); </script>
somepage.php Создайте somepage.php (Если вы хотите изменить имя этой страницы, измените в <script></script>
тоже. Оба связаны друг с другом.)
<? $famID=$_GET['famID']; $famAddr=$_GET['famAddr']; $famPhone=$_GET['famPhone']; $famName=$_GET['famName']; ?> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4> </div> <div class="modal-body"> <form id="form1" method="post"> <b>Details</b> <hr></hr> Address: <p><?php echo $famAddr;?></p> Phone_num: <p><?php echo $famPhone;?></p> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div>