通過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) 
})