CODEWITHSUNDEEP
phpjqueryajaxtwitter-bootstrapcodeigniter
XxnumbxX
XxnumbxX

Reputation: 134

Populating Codeigniter Bootstrap Modal from DB via Ajax?

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

Upvotes: 0

Views: 615

Answers (1)

Kisaragi
Kisaragi

Reputation: 2218

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

Upvotes: 1

Related Questions