Display data after ajax request in codeigniter

Question

I am using Ajax request to fetch data from database. All I want to do is to display the result in tabular form whenever we select an option from the option list. I am also able to do that but when I am choosing another option the view for the previous option it is not removed from the table.

View:

 $('#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>

Controller:

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

Model:

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

When I am selecting a city from option it is showing me the result for that city which is correct. When I am choosing another city from the option it is showing the result also, but the result for the previous option is not removed from the table. I want to remove the previous record when I am selecting another option.

Answer 1

Check the below code ( not tested ). Clear the contents before appending data in the loop.

$('#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>