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

Question

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>

Answer 1

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();