通过Ajax从DB填充Codeigniter Bootstrap模式?

时间:2016-08-30 18:52:31

标签: php jquery ajax twitter-bootstrap codeigniter

我正在尝试将一个玩家列表填充到一个bootstrap模式中的表中。目前我有按钮将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; ?>

1 个答案:

答案 0 :(得分: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)
})