Отображение данных после запроса ajax в codeignitor

Question

Я использую ajax-запрос для извлечения данных из базы данных.Все, что я хочу сделать, это отображать результат в виде таблицы всякий раз, когда мы выбираем опцию из списка опций.Я также могу сделать это, но когда я выбираю другую опцию, представление предыдущей опции не удаляется из таблицы.

Представление:

 $('#city').on('change',function(){
        var cityID = $(this).val();
         //   alert(cityID);
         $.ajax({
          type:'POST',
          url:'<?php echo base_url('bank/getBranchDetail'); ?>',
          data:'city_id='+cityID,
          success:function(data){
           var dataObj = jQuery.parseJSON(data);
           $(dataObj).each(function(){
           var ifsc = $('<p />');
           var micr = $('<p />');
           var contact = $('<p />');
           var address = $('<p />');
           // alert(option);
           ifsc.attr('value', this.id).text(this.ifsc_code);  
           micr.attr('value', this.id).text(this.micr_code); 
           contact.attr('value', this.id).text(this.contact_no);
           address.attr('value', this.id).text(this.address); 
           $('#ifsc').append(ifsc);
           $('#micr').append(micr);
           $('#contact').append(contact);
           $('#address').append(address);
         });
          //  $('#hodm_results').html(data);
      }
    }); 
});

<table class="table  table-bordered table-hover table-full-width" id="table_userinfo">
                <thead>
                <tr>
                    <th>IFSC Code</th>
                    <th>MICR Code</th>
                    <th>Contact No.</th>
                    <th>Address</th>
                </tr>
                <tr>
                    <td id="ifsc"></td>
                    <td id="micr"></td>
                    <td id="contact"></td>
                    <td id="address"></td>
                </tr>
                </thead>
                </table>

Контроллер:

public function getBranchDetail(){
    $branch = array();
    $city_id = $this->input->post('city_id');
    if($city_id){
        $con['conditions'] = array('id'=>$city_id);
        $branchData = $this->Bank_model->getBranchData($con);
    }
    echo json_encode($branchData);
}

Модель:

function getBranchData($params = array()){
    $this->db->select('c.micr_code, c.ifsc_code, c.contact_no, c.address');
    $this->db->from($this->branchTbl.' as c');

    //fetch data by conditions
    if(array_key_exists("conditions",$params)){
        foreach ($params['conditions'] as $key => $value) {
            if(strpos($key,'.') !== false){
                $this->db->where($key,$value);
            }else{
                $this->db->where('c.'.$key,$value);
            }
        }
    }

    $query = $this->db->get();
    $result = ($query->num_rows() > 0)?$query->result_array():FALSE;

    //return fetched data
    return $result;
}

Когда я выбираю город из опции, он показывает мне результат для этого города, который является правильным, но когда я выбираю другой город из опции, он показывает результаттакже, но результат для предыдущего варианта не удаляется из таблицы.Я хочу удалить предыдущую запись, если выбираю другой вариант.

Answer 1

Проверьте приведенный ниже код (не проверено).Очистите содержимое перед добавлением данных в цикл.

$('#city').on('change',function(){
        var cityID = $(this).val();
         //   alert(cityID);
         $.ajax({
          type:'POST',
          url:'<?php echo base_url('bank/getBranchDetail'); ?>',
          data:'city_id='+cityID,
          success:function(data){
           var dataObj = jQuery.parseJSON(data);

           // clear the data before appending

           $('#ifsc').html("");
           $('#micr').html("");
           $('#contact').html("");
           $('#address').html("");

           $(dataObj).each(function(){
           var ifsc = $('<p />');
           var micr = $('<p />');
           var contact = $('<p />');
           var address = $('<p />');
           // alert(option);
           ifsc.attr('value', this.id).text(this.ifsc_code);  
           micr.attr('value', this.id).text(this.micr_code); 
           contact.attr('value', this.id).text(this.contact_no);
           address.attr('value', this.id).text(this.address); 
           $('#ifsc').append(ifsc);
           $('#micr').append(micr);
           $('#contact').append(contact);
           $('#address').append(address);
         });
          //  $('#hodm_results').html(data);
      }
    }); 
});

<table class="table  table-bordered table-hover table-full-width" id="table_userinfo">
                <thead>
                <tr>
                    <th>IFSC Code</th>
                    <th>MICR Code</th>
                    <th>Contact No.</th>
                    <th>Address</th>
                </tr>
                <tr>
                    <td id="ifsc"></td>
                    <td id="micr"></td>
                    <td id="contact"></td>
                    <td id="address"></td>
                </tr>
                </thead>
                </table>