Populating Codeigniter Bootstrap Modal from DB via Ajax?

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; ?>

Kisaragi · Accepted Answer · 2016-08-30 19:41:54Z

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

edited Aug 30, 2016 at 19:41

answered Aug 30, 2016 at 19:05

Kisaragi

2,2183 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XxnumbxX Over a year ago

The <td id="update_event"> is not clickable. Am I doing something wrong? Also I assume the double quotes after #update_event should be single? Sorry I dont really know ajax.

Collectives™ on Stack Overflow

Populating Codeigniter Bootstrap Modal from DB via Ajax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related