如何在模态中获取 id 并使用 php 将其数据打开到另一个页面？

Posted 2023-05-08

【中文标题】如何在模态中获取 id 并使用 php 将其数据打开到另一个页面？

【英文标题】：How to get the id in modal and open their data to another page with php?

【发布时间】：2022-01-03 23:41:55

【问题描述】：

我想从此模式中获取 id 并将其传递到另一个页面，如 edit_appointment.php?id='id from modal' 问题是我将我的 php 代码执行到不同的文件并仅使用 Ajax 请求来显示我的数据到模态。我不知道如何在这里调用用户ID a href="" class="btn btn-info userdata">编辑约会 这是我的代码

<div class="modal fade" id="AppointmentDetails">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="modalTitle" class="modal-title">Appointment Details</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
      </div>
      <div id="modalBody" class="modal-body">
        <div class="viewdetails">

        </div>
      </div>
      <div class="modal-footer">
        <a href="" class="btn btn-secondary" data-dismiss="modal">Close</a>
        <a href="" class="btn btn-info userdata">Edit Appointment</a>
      </div>
    </div>
  </div>
</div>

if(isset($_POST['userid']))
    
        $id = $_POST['userid'];
        $sql = "SELECT a.*, CONCAT(p.fname,' ',p.lname) AS pname,p.phone,p.email,d.name AS dname FROM tblappointment as a JOIN tblpatient as p ON p.id = a.patient_id JOIN tbldoctor as d ON d.id = a.doc_id WHERE a.id = '$id' ";
        $query_run = mysqli_query($conn,$sql);
        
        if(mysqli_num_rows($query_run) > 0)
        
            foreach($query_run as $row)
            
                ?>
                <table class="table table-borderless table-responsive table-sm">
                    <thead>
                        <tr>
                            <th style="width: 40px"></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th class="text-muted">Client:</th>
                            <td><a href=""><?php echo $row['pname'];?></a></br>
                            <?php echo $row['phone'];?></br>
                            <?php echo $row['email'];?></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Doctor:</th>
                            <td><?php echo $row['dname'];?></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Date:</th>
                            <td><?php echo date('F, j Y',strtotime($row['schedule'])); ?></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Time:</th>
                            <td><?php echo date('h:i A',strtotime($row['starttime'])).' - '.date('h:i A',strtotime($row['endtime'])); ?></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Reason:</th>
                            <td><?php echo $row['reason']; ?></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Status:</th>
                            <td>
                                <?php 
                                    if($row['status'] == 'Confirmed')
                                    
                                        echo $row['status'] = '<span class="badge badge-success">Confirmed</span>';
                                    
                                ?>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <?php
            
        
        else
            echo $return = "<h5> No Record Found</h5>";
        
    

我使用 Ajax 请求从 modal 获取数据

eventClick:  function(info) 
         var userid =  info.event.id;        

         $.ajax(
           type: "post",
           url: "calendar_action.php",
           data: userid:userid,
           success: function (response) 
            $('.viewdetails').html(response);
            $("#AppointmentDetails").modal();
           
         );
        ,

【参考方案1】：

在您的 ajax 响应中返回 html 数据时，您可以在其中一个 html 标记中附加您的 id。让我们在第一项即行中附加 id，Client: Dexter Veldez。 假设 Client: 的 html 代码是：

<b>Client:</b>

现在我们在这个标签（b标签）中附加id，并给它一个唯一的id'client-label'，以便以后选择这个标签变得更容易：

<b id="client-label" data-id='<?php echo $id; ?>'>Client:</b>

现在在模态部分，在 Edit Appointment 按钮中附加一个 onclick 事件：

<a href="#" class="btn btn-info userdata" onclick="editButtonClicked();">Edit Appointment</a>

现在在页面底部的脚本标签内定义一个名为 editButtonClicked 的函数：

    <script>
    function editButtonClicked()
        var clientTag = document.getElementById("client-label");
        var requiredId = clientTag.getAttribute('data-id');
        //now navigate to edit page with the id
        window.location.href = '/edit_appointment.php?id=' + requiredId;
    
</script>

【讨论】：

哇，非常感谢！！！

没问题，如果还有问题，请告诉我！