javascript - 在引导模式中显示 json 数据

Question

你好，我是 ajax 和 json 新手，以前从未使用过模态。我需要显示我已经输入控制台的数据。我需要在控制台上以模式显示数据。

当我单击查看请求按钮时，我需要显示每个员工详细信息的每个具体详细信息。控制台显示正确的详细信息。

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



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

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



       //disapprove button
        $('#declinebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/disapproveLeave', 

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

    });





$("#showleave").on('click','button',function(event){
var BASE_URL = "http://localhost/employeemgt/index.php/";
    var leave_id = $(this).val();
    var response;
    $.ajax({
        type: 'POST',
        dataType: "JSON",
        data:{leave_id:leave_id},
        url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

    success:function(data){                 
        console.log(data);
        $('#pendingLeaveRequest #leave_details').html(data);       
        $('#pendingLeaveRequest').modal('show');
   },
   error:function(error){
        alert(error);
    }});
});


</script>

查看

<div id="showleave">
                <h4 class="mb-4">Pending Requests</h4>
                    <?php
                        foreach ($leave as $row) {  
                        if($row->status != "1")
                         {                          
                            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>
                                      <button type="button" class="detailButton" href="<?php echo $id; ?>" data-id="'.$row->id.'" data-name="'.$row->user_name.'"  data-target="#pendingLeaveRequest" data-toggle="modal" value="'.$row->id.'">View Request</button>
                                    </div>
                                </li>               
                            </ul>
                            ';
                        }
                        }
                    ?>
                </div>

模态

<!-- Modal -->
    <div class="modal fade" id="pendingLeaveRequest" 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" id="leave_details" >
            <p>

            </p>
          </div>
          <div class="modal-footer">
            <input type="hidden" name="current_leave_id" id="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>

Controller

    public function viewRequest()
{
    $leave_id = $this->input->post('leave_id');     
    $data = $this->Admin_Model->viewRequest($leave_id);
    echo json_encode($data);
}

Answer 1

在 ViewRequest 函数中使用以下代码，删除我以前的代码。

  $("#showleave").on('click','button',function(event){
    var BASE_URL = "http://localhost/employeemgt/index.php/";
        var leave_id = $(this).val();
        var response;
        $.ajax({
            type: 'POST',
            dataType: "JSON",
            data:{leave_id:leave_id},
            url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

        success:function(data){                 
            console.log(data);
            $('#pendingLeaveRequest #leave_details').html(data);       
            $('#pendingLeaveRequest').modal('show');
       },
       error:function(error){
            alert(error);
        }});
    });