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

In my leave approval system admin can see the employee leave using foreach loop. Admin should approve or disapprove leave using the leave id.Im not clear on how to take the leave id from the view to my javascript file.

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

This is the js file. The variable id is not working.

<?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>
                            ';
                        }
                    ?>

above is the code where it display leave to the admin.

the following is the modal

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

In your modal window, you have to add an input to store the current leave id. In your modal html add the following line.

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

If you still don't have modal show event handler, add the following block. It saves the current leave id so when approve button is clicked, it will know which record to update.

$('#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); 
});

In your first code block - #approvebtn click handler..

Change:

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

To:

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

You can create the function on "onclick". In that function, you can add id which you get from foreach loop. but you have to create function leaveArrove(id) in javascript. add your javascript code in that function.

Try this

Ex: Javascript code:

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

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