通过Ajax从数据库填充Codeigniter Bootstrap模态？

Question

我正在试图将一个玩家列表填充到引导模式中的表格中。目前我有按钮，发送event_id到控制器;然后控制器向模型发送查询，并将数据传递给视图。不过，我希望在原始视图中加载模式。我猜测我需要一些Ajax来使这个工作，但我有一些麻烦让它工作。希望有人能指引我走向正确的方向，或有另一条路可以走。 这是我目前使用的代码。

控制器：

function event_users($event_id) 
{ 
    $this->load->model('email_model'); 
    $data['darkteam'] = $this->event_model->dark_team_list($event_id); 
    $data['lightteam'] = $this->event_model->light_team_list($event_id); 
    $data['darkgoalie'] = $this->event_model->dark_goalie_list($event_id); 
    $data['lightgoalie'] = $this->event_model->light_goalie_list($event_id); 
    $data['event_data'] = $this->email_model->get_location_date($event_id); 
    $this->load->view('templates/header'); 
    $this->load->view('event/player_list', $data); 

} 

查看：

<td><a href="<?php echo base_url(); ?>event/event_users/<?php echo $e->id; ?>Player List</td> 

模式视图（player_list.php）：

<script type="text/javascript"> 
$(window).load(function(){ 
    $('#user_event_modal').modal('show'); 
}); 
</script> 

<?php foreach ($event_data as $ed): ?> 
<?php $location = $ed->location; ?> 
<?php $date = $ed->date; ?> 
<?php endforeach; ?> 

<!--User Event List--> 
<div class="modal fade" id="user_event_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="location.href='<?php echo base_url();?>event'"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
    <h4 class="modal-title custom_align" id="Heading"><strong><?php echo $location . " - " . date("l, F jS @ g:ia",strtotime($date)); ?></h4></strong> 
    </div> 
    <div class="modal-body"> 
     <div class="row"> 
     <div class="col-md-6"> 
     <table class="table table-striped table-condensed table-bordered table-list events-list-table"> 
     <thead> 
     <tr> 
     <strong>Dark Team</strong> 
     </tr> 
     </thead> 
     <tbody> 
     <?php if (!empty($darkteam)): ?> 
     <?php foreach ($darkteam as $row): ?> 
      <tr> 
       <td><div style="float: left; text-align: left;"><?php echo ($row->first_name) . " " . ($row->last_name); ?></div><div style="float: right; text-align: right;"> 
       <?php if ($this->ion_auth->is_admin()) : ?> 
       <button onclick="location.href='<?php echo base_url();?>event/switch_team/<?php echo ($row->user_id . "/" . $row->event_id); ?>' " class="btn btn-primary right-block btn-xs" data-dismiss="modal"><i class="fa fa-arrow-right"></i></button> 
       <?php elseif ($row->user_id == $this->session->userdata('user_id')) :?> 
       <button onclick="location.href='<?php echo base_url();?>event/switch_team/<?php echo ($row->user_id . "/" . $row->event_id); ?>' " class="btn btn-primary right-block btn-xs" data-dismiss="modal"><i class="fa fa-arrow-right"></i></button> 
       <?php else: ?> 
       <?php endif; ?> 
       </div></td> 
      </tr> 
     <?php endforeach; ?> 
     <?php else: ?> 
     <tr> 
      <td class="bg-info" colspan="6">No users currently registered.</td> 
     </tr> 
     <?php endif; ?> 

Answer 1

是的，使用Ajax来清空，然后追加内容的模态：

<!--replace <a></a> tag with element so jquery can target--> 
    <td id="update_event">Player List</td> 

    <!--add an id to the table so ajax can update on success--> 
    <table id="updateable"class="table table-striped table-condensed table-bordered table-list events-list-table"> 

现在为AJAX：

//we can use a click event listener 
$('#update_event").on("click", "td", function(){ 
    var id = '<?php echo $e->id;?>'; 
    $.ajax({ 
     url: '/event/event_users/'+ id +'', 
     success: function(results){ 
         $(#updateable).empty(); //first empty table 
    })    $(#updateable).html(//append data to table) 
})