代码点火器.当使用ajax按下按钮时，如何将数据表中的数据获取并显示为模态数据

Question

嗨，我已经在这里堆了将近3天了。我想获取和显示数据(从他们各自的主键(到模态。当我点击按钮查看详细信息时，它总是刷新，模态不会显示。所以请有人帮我解决这个问题

控制器：

public function eventdetails($event_id)
{
$this->load->model("event_models");
$data['results'] = $this->event_models->eventdetails($event_id);
echo json_encode($data);
}

视图(数据表(：

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">EVSU</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="manageMemberTable" class="table table-bordered table-hover">




<thead>
<tr>
<th>Event Title</th>
<th>Start date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>


<tr>
<?php foreach ($all_events as $list): ?>

<td><?php echo $list->event_title; ?></td>
<td><?php echo $list->start_date;?></td>
<td>Ongoing</td>
<td><button name="get" id="<?php echo $list->event_id ?>" 
class="btn btn-block btn-secondary btn-sm get" data-toggle="modal" 
data-target=".bd-example-modal-lg" > View Details </button></td>



</tr>
<?php endforeach; ?>

</tfoot>
</table>
</div>
</tbody>
<!-- /.card-body -->
</div>
<!-- /.card -->

</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

数据显示模式：

<div class="modal fade bd-example-modal-lg" tabindex="-1" 
role="dialog" aria- 
labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" style="text-align: left;">Event Details</h3>
</div>
<div class="card" style="width: auto; height: auto;">
<img src="assets/css/evsub.jpg" class="card-img-top" alt="...">
<div class="card-body" id="load_data">

<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th></th>  
</tr>
</thead>
<tbody>

<tr>
<td>Event Title:</td>
<td></td>
</tr>

<tr>
<td>Event Details:</td>
<td></td>
</tr>
<tr>
<td>When:</td>
<td>march 13 2020 - march 15 2020</td>
</tr>
<tr>
<td>Venue:</td>
<td>Gym</td>
</tr>
<tr>
<td>Course:</td>
<td>Information Technology</td>
</tr>
<tr>
<td>Year Level:</td>
<td>4th year</td>
</tr>
<tr>
<td>Sponsor:</td>
<td>Evsu</td>
</tr>
<tr>
<td>School Year & Semester:</td>
<td>2019-2020 2nd sem</td>
</tr>
</tbody>
</table>
</div>
<p class="card-text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="<?php echo base_url(''); ?>">  <button type="submit" class="btn btn-primary" 
>Join</button> 
</a>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /add mmebers --><!-- /.modal -->
<!-- /add mmebers -->
<!-- edit member -->

AJAX：

$(document).ready(function(){
$('#manageMemberTable').on('click', '.get', function(){  
var event_id = $(this).attr("id");  

$.ajax({  
url:"<?php echo base_url() ?>Events/eventdetails/"+event_id,
method:"POST",  
dataType:"json",  
success:function(data)  
{  

$('#userModal').modal('show');
$('[name="event_title "]').val(data.event_title);  
$('#event_desc').val(data.event_desc);  
$('#event_id').val(event_id);  

} 


})  
});
});

Answer 1

您的数据表视图：-

<td>
<input type="button" value="View Detail Event" id="<?php echo $list->event_id; ?>" class="btn btn-info view_event" />
</td>  

引导模式代码：-

将此引导模式代码放在视图文件中的关闭标记之前，其中数据将通过视图详细信息按钮显示。

<div id="dataModal" class="modal fade">  
<div class="modal-dialog modal-xl">  
<div class="modal-content">  
<div class="modal-header">  
<button type="button" class="close" data-dismiss="modal">&times;</button>  
<h4 class="modal-title">View Full Details</h4>  
</div>  
<div class="modal-body" id="your_modal_detail">  
</div>  
<div class="modal-footer">  
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div>  

JQUERY AJAX代码：-

将其放在引导模式代码之后，但在关闭视图文件中的标记之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
$(document).ready(function(){  
$('.view_event').click(function(){  
var event_id = $(this).attr("id");  
$.ajax({  
url : "<?php echo base_url('ControllerName/get_data_in_modal') ?>", 
method:"POST",  
data:{event_id:event_id},  
success:function(data){
//alert(data);  
$('#your_modal_detail').html(data);  
$('#dataModal').modal("show");  
}  
});  
});  
});  
</script>

控制器代码：-

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ControllerName extends CI_Controller {
public function get_data_in_modal(){
$event_id = $this->input->post("event_id");

$this->load->YourModelName();

$data['events'] = $this->YourModelName->getDatainModal($event_id);
$this->load->view('eventsinModal',$data);
}
}
?>

模式代码：-

<?php
class YourModelName extends CI_Model {
function getDatainModal($event_id){
return $event = $this->db->get_where('table_name',array('event_id'=>$event_id))->row_array();   
}   
}
?>

在视图中创建文件夹事件Modal.php：-

<div class="table-responsive">
<table class="table table-bordered"> 
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Event Title</label></td>  
<td width="70%"><?php echo $events["event_title"];?></td>  
</tr> 
</div>
<div class='col-md-6'>       
<tr>
<td width="30%"><label>Event Start Date</label></td>  
<td width="70%"><?php echo $events["start_date"];?></td>  
</tr>
</div>   
</div>
</table>
</div>