Populating Codeigniter Bootstrap Modal from DB via Ajax? - php

Question

I am trying to populate a list of players into a table within a bootstrap modal. Currently I have button that sends the event_id to the controller; the controller then sends a query to the model and I pass the data to a view. However I would like the modal to load within the original view. I am guessing I need some ajax to get this to work however I am having some trouble getting it to work. Hoping someone can point me in the right direction or have another route for me to go.
Here is the code I currently am using.
Controller:
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);
}
View:
<td><a href="<?php echo base_url(); ?>event/event_users/<?php echo $e->id; ?>Player List</td>
Modal View (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

Yes, use ajax to empty and then append content to the modal:
<!--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">
Now for the 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)
})