如何使用 AJAX 调用加载不同选项卡的表数据

Question

I want to load the data based on the tabs. The first tab doesn't have any table data but in the second tab the table data has to be loaded.

I am getting the second tab content as empty, same as in the first. I don't know why. I am confused about how to load the data based on the tabs using an AJAX call.

<div id="content" class="content">
  <ol class="breadcrumb pull-right">
    <li><a href="<? echo base_url()?>index.php/ticket/index">Home</a></li>
    <li><a href="<? echo base_url()?>index.php/ticket/index">My <?=LEADS?></a></li>
    <li class="active">Coassign</li>
  </ol>
  <h1 class="page-header">Coassign<small> Coassigned <?=LEADS?></small></h1>
  <div class="row">
    <div class="col-md-12">
      <div class="panel-body p-0">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#coassigned_to_me" data-toggle="tab" class="semi-bold text-inverse"><i class="fa fa-ticket fa-2x text-primary"></i> CoAssigned To Me</a></li>
          <li class=""><a href="#coassigned_by_me" data-toggle="tab" class="semi-bold text-inverse"><i class="fa fa-pencil fa-2x text-success"></i> CoAssigned By Me</a></li>
        </ul>
        <div class="tab-content">
          <div id="coassigned_to_me" class="tab-pane fade in active">
            <div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions">
              <a href="javascript:;" class="btn btn-sm btn-success" id='csgn_fltr_to_me'><i class="fa fa-filter"></i></a>
              <div class='hide' id='csgndiv_to_me'>
                <div class="panel-group">
                  <button href="#" class="btn btn-link btn-sm" onclick="clearFilter()">Clear Filter</button>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                          <i class="more-less glyphicon glyphicon-plus"></i> Lead ID
                        </a>
                      </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_det as $rows){?>
                        <input type="checkbox" class="LeadID_det" name="leadid_det_<?=$rows['ticket_id'];?>" id="leadid_det_<?=$rows['ticket_id'];?>" value="<?=$rows['ticket_id'];?>" <? if(in_array($rows[ 'ticket_id'])) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$rows['ticket_id'];?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
                          <i class="more-less glyphicon glyphicon-plus"></i> Client
                        </a>
                      </h4>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_det as $rows)
                                                    {
                                                        $client = $rows['f_name']." ".$rows['l_name'];
                                                        ?>
                        <input type="checkbox" class="Client_det" name="client_det_<?=$client;?>" id="client_det_<?=$client;?>" value="<?=$client;?>" <? if(in_array($client)) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$client;?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accrodion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
                          <i class="more-less glyphicon glyphicon-plus"></i> Contact Number
                        </a>
                      </h4>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_det as $rows){?>
                        <input type="checkbox" class="Contact_det" name="contact_det_<?=$rows['phonefax'];?>" id="contact_det_<?=$rows['phonefax'];?>" value="<?=$rows['phonefax'];?>" <? if(in_array($rows[ 'phonefax'])) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$rows['phonefax'];?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade in active" id="coassigned_to_me">
              <div class="panel-body">
                <div class="table-responsive">
                  <table id="data-table1" class="table bg-white table-bordered ">
                    <thead>
                      <tr>
                        <th>
                          <?=LEAD?> ID</th>
                        <th>Title</th>
                        <th>Client</th>
                        <th>Updated Date</th>
                        <th>Follow Up Date</th>
                        <th>Category</th>
                        <th>
                          <?=REP?>
                        </th>
                        <th>CoAssign
                          <?=REP?>
                        </th>
                        <th>
                          <?=LEAD?> Status</th>
                      </tr>
                    </thead>
                    <tbody id="coassign_data_det">
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div id="coassigned_by_me" class="tab-pane fade">
            <div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions">
              <a href="javascript:;" class="btn btn-sm btn-success" id='csgn_fltr_by_me'><i class="fa fa-filter"></i></a>
              <div class='hide' id='csgndiv_by_me'>
                <div class="panel-group">
                  <button href="#" class="btn btn-link btn-sm" onclick="clearFilter()">Clear Filter</button>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFour">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="true" aria-controls="collapse4">
                          <i class="more-less glyphicon glyphicon-plus"></i> Lead ID
                        </a>
                      </h4>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_by_me as $rows1){?>
                        <input type="checkbox" class="LeadID_by_me" name="leadid_by_me_<?=$rows1['ticket_id'];?>" id="leadid_by_me_<?=$rows1['ticket_id'];?>" value="<?=$rows1['ticket_id'];?>" <? if(in_array($rows1[ 'ticket_id'])) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$rows1['ticket_id'];?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFive">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="true" aria-controls="collapse5">
                          <i class="more-less glyphicon glyphicon-plus"></i> Client
                        </a>
                      </h4>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_by_me as $rows1)
                                                    {
                                                        $clientbm = $rows1['f_name']." ".$rows1['l_name'];
                                                        ?>
                        <input type="checkbox" class="Client_by_me" name="client_by_me_<?=$clientbm;?>" id="client_by_me_<?=$clientbm;?>" value="<?=$clientbm;?>" <? if(in_array($clientbm)) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$clientbm;?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingSix">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accrodion" href="#collapse6" aria-expanded="true" aria-controls="collapse6">
                          <i class="more-less glyphicon glyphicon-plus"></i> Contact Number
                        </a>
                      </h4>
                    </div>
                    <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
                      <div class="panel-body">
                        <?php 
                                                    foreach($coassign_by_me as $rows1){?>
                        <input type="checkbox" class="Contact_by_me" name="contact_by_me_<?=$rows1['phonefax'];?>" id="contact_by_me_<?=$rows1['phonefax'];?>" value="<?=$rows1['phonefax'];?>" <? if(in_array($rows1[ 'phonefax'])) { echo "checked"; } ?>/>
                        <span style="font-size:12px;"><?=$rows1['phonefax'];?></span>
                        <br/>
                        <?php }?>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table id="data" class="table bg-white table-bordered">
                  <thead>
                    <tr>
                      <th>
                        <?=LEAD?> ID</th>
                      <th>Title</th>
                      <th>Client</th>
                      <th>Updated Date</th>
                      <th>Follow Up Date</th>
                      <th>Category</th>
                      <th>
                        <?=REP?>
                      </th>
                      <th>CoAssign
                        <?=REP?>
                      </th>
                      <th>
                        <?=LEAD?> Status</th>
                    </tr>
                  </thead>
                  <tbody id="coassign_data_byme">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  public function coassign_list($leaddt,$cldt,$cndt)
    {
        $this->db->save_queries = true;
        $rep_id=$this->session->userdata('TechUser_Id');
        $rows=$this->db->select('pm1coassign_lead.*, pm1category.category_name, pm1ticket.subject, pm1ticket.updt_date, pm1contact.f_name, pm1contact.l_name, pm1contact.phonefax, pm1contact_rep.user_name, pm1status.rep_display, pm1ticket.due_date',false);
                    $this->db->from('pm1coassign_lead',true);
                    $this->db->join('pm1ticket','pm1ticket.id=pm1coassign_lead.ticket_id');
                    $this->db->join('pm1category','pm1category.id=pm1ticket.category_id');
                    $this->db->join('pm1contact','pm1contact.id=pm1ticket.customer_id');
                    $this->db->join('pm1contact_rep','pm1ticket.rep_id=pm1contact_rep.id');
                    $this->db->join('pm1status','pm1ticket.status_id=pm1status.id');
                    $this->db->where('coassign_rep',$rep_id);
                    $this->db->where('rem_flag !=','1');
                    $this->db->get();
                    //echo $this->db->last_query();
        return $rows->result_array();
    }

    public function coassign_by_me($leadbm,$clbm,$cnbm)
    {
        $rep_id=$this->session->userdata('TechUser_Id');
        $rows=$this->db->select('pm1coassign_lead.ticket_id, pm1category.category_name, pm1ticket.subject, pm1ticket.updt_date, pm1contact.f_name, pm1contact.l_name, pm1contact.phonefax, pm1ticket.rep_id as t_rep, rep1.user_name as rep1, rep2.user_name as rep2, pm1status.rep_display, pm1ticket.due_date')
                    ->from('pm1coassign_lead',true)
                    ->join('pm1ticket','pm1ticket.id=pm1coassign_lead.ticket_id')
                    ->join('pm1category','pm1category.id=pm1ticket.category_id')
                    ->join('pm1contact','pm1contact.id=pm1ticket.customer_id')
                    ->join('pm1contact_rep as rep1','pm1ticket.rep_id=rep1.id')
                    ->join('pm1contact_rep as rep2','pm1coassign_lead.coassign_rep=rep2.id')
                    ->join('pm1status','pm1ticket.status_id=pm1status.id')
                    ->where('coassign_by',$rep_id)
                    ->get();
                    //echo $this->db->last_query();die;
        return $rows->result_array();
    }
?>

coassign_list();

$(document).ready(function() {
  $('#csgn_fltr_to_me').popover({
    placement: 'bottom',
    title: ('&nbsp;') + '<button type="button" class="close pull-right" data-dismiss="alert" style="color:black;">&times;</button>',
    html: true,
    content: function() {
      return $('#csgndiv_to_me').html();
    }
  });

  $('#csgn_fltr_by_me').popover({
    placement: 'bottom',
    title: ('&nbsp;') + '<button type="button" class="close pull-right" data-dismiss="alert" style="color:black;">&times;</button>',
    html: true,
    content: function() {
      return $('#csgndiv_by_me').html();
    }
  });

  $(document).on("click", ".popover .close", function() {
    $(this).parents(".popover").popover('hide');

  });
});

function coassign_list() {
  var LDdtClicked = new Array();
  var CltdtClicked = new Array();
  var CntdtClicked = new Array();
  var LDbymeClicked = new Array();
  var CltbymeClicked = new Array();
  var CntbymeClicked = new Array();

  $('.LeadID_det').each(function() {
    if ($(this).is(':checked')) {
      LDdtClicked.push($(this).val());
    }
  });

  $('.Client_det').each(function() {
    if ($(this).is(':checked')) {
      CltdtClicked.push($(this).val());
    }
  });

  $('.Contact_det').each(function() {
    if ($(this).is(':checked')) {
      CntdtClicked.push($(this).val());
    }
  });

  $('.LeadID_by_me').each(function() {
    if ($(this).is(':checked')) {
      LDbymeClicked.push($(this).val());
    }
  });

  $('.Client_by_me').each(function() {
    if ($(this).is(':checked')) {
      CltbymeClicked.push($(this).val());
    }
  });

  $('.Contact_by_me').each(function() {
    if ($(this).is(':checked')) {
      CntbymeClicked.push($(this).val());
    }
  });

  $.ajax({
    url: "<?=base_url()?>approval/coassign_listfltr",
    method: "POST",
    data: {
      type: 'text',
      LDdtClicked: LDdtClicked,
      CltdtClicked: CltdtClicked,
      CntdtClicked: CntdtClicked,
      LDbymeClicked: LDbymeClicked,
      CltbymeClicked: CltbymeClicked,
      CntbymeClicked: CntbymeClicked
    },
    cache: false,
    error: function() {
      console.log('Something is wrong');
    },
    success: function(response) {
      alert(response);
      if (response != '') {
        $('#coassign_data_det').html(response);
      } else {
        $('#coassign_data_det').html("");
      }
    }
  });
}

Answer 1

Your function is not triggered for tabs. You can do this by:

    <ul class="nav nav-tabs">
      <li class="active" onclick="coassign_list()"><a href="#coassigned_to_me" data-toggle="tab" class="semi-bold text-inverse"><i class="fa fa-ticket fa-2x text-primary"></i> CoAssigned To Me</a></li>
      <li class="" onclick="coassign_list()"><a href="#coassigned_by_me" data-toggle="tab" class="semi-bold text-inverse"><i class="fa fa-pencil fa-2x text-success"></i> CoAssigned By Me</a></li>
    </ul>