在引导模式中显示 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>

控制器

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