获取从 foreach 循环显示到脚本代码的特定 id

Question

在我的休假审批系统中，管理员可以使用 foreach 循环查看员工休假。管理员应该使用休假 id 批准或不批准休假。我不清楚如何将休假 id 从视图中提取到我的 javascript 文件中。

    <script> 

    $(function(){

    var BASE_URL = "http://localhost/employeemgt/index.php/";

        $('#pedingLeaveRequest').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var current_leave_id = button.data('id');
            var modal = $(this);

            modal.find('input[name="current_leave_id"]').val(current_leave_id); 

            alert(current_leave_id); 
        });     


       $('#approvebtn').click(function(){               
         var id = $('input[name="current_leave_id"]').val();
         alert(id);
            $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){
                    // error                        
                    alert('try again');
                }else{
                    // suceess
                    alert('Leave has been approved!');
                }
            });              
        });
    });

</script>

这是js文件。变量 id 不起作用。

<?php
                        foreach ($leave as $row) {
                            echo '
                            <ul class="list-unstyled">
                                <li class="media border-bottom border-top py-3">
                                    <img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
                                    <div class="media-body">
                                      <h5 class="mt-0 mb-1">'.$row->user_name.'</h5>
                                      <p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p>
                                      <p class="mt-0">'.$row->leave_type.'</p>
                                      <p class="mt-0">'.$row->id.'</p>
                                      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pedingLeaveRequest">View Request</button>
                                    </div>
                                </li>               
                            </ul>
                            ';
                        }
                    ?>

上面是它向管理员显示的代码。

以下是模态

    <!-- Modal -->
    <div class="modal fade" id="pedingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Leave Request</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-12 mb-3">
                    <p class="mt-0 mb-1 font-weight-bold">Name</p>
                    <p class="mt-0 mb-0"><?php echo ''.$row->user_name.' '; ?></p>
                </div>
            </div>
            </div>
          <div class="modal-footer">
            <input type="hidden" name="current_leave_id" value=""/>
            <button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal">Decline</button>
            <button type="button" id="approvebtn" class="btn btn-primary">Approve</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

在您的模态窗口中，您必须添加一个输入来存储当前的休假 ID。在您的模态 html 中添加以下行。

<input type="hidden" name="current_leave_id" value=""/>

如果您仍然没有模态显示事件处理程序，请添加以下块。它保存当前的休假 id，因此当单击批准按钮时，它将知道要更新哪条记录。

$('#pedingLeaveRequest').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var current_leave_id = button.data('id');
    var modal = $(this);

    modal.find('input[name="current_leave_id"]').val(current_leave_id); 
});

在您的第一个代码块中 - #approvebtn 点击处理程序..

更改：

var id = $(this).attr('data');

收件人：

var id = $('input[name="current_leave_id"]').val();

Answer 2

您可以在“onclick”上创建功能。在该函数中，您可以添加从 foreach 循环中获得的 id。但您必须在 javascript 中创建函数 leaveArrove(id)。在该函数中添加您的 javascript 代码。

试试这个

例如： Javascript代码：

function leaveArrove(id){

  $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 

    {'id': id}, 
    function(result){
        console.log(result);
    if(result.error){
        // error
        alert('try again');
    }else{
        // suceess
        alert('Leave has been approved!');
    }
 });              
}

HTML代码：

<div id="showleave">
    <h4 class="mb-4">Pending Requests</h4>
    <?php
        foreach ($leave as $row) {
            echo '
            <ul class="list-unstyled">
                <li class="media border-bottom border-top py-3">
                    <img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
                    <div class="media-body">
                      <h5 class="mt-0 mb-1">'.$row->user_name.'</h5>
                      <p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p>
                      <p class="mt-0">'.$row->leave_type.'</p>
                      <p class="mt-0">'.$row->id.'</p>
                      <button type="button" name="addcart" onclick= "leaveArrove(<?php echo $row->id;?>)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pedingLeaveRequest" data-id="'.$row->id.'">View Request</button>
                    </div>
                </li>               
            </ul>
            ';
        }
    ?>
</div>