[SOLVED] Remove old result - Ajax

Hi CI Team,

I very need your help to fix this,

1.How to remove old result when I click another category?  
2.How to show all categories without click "All Categories" ?

Please help me....

View:

PHP Code:

<a class="nav-link active" onclick="product_category(''); return false;" id="tab-all" data-toggle="tab" href="#tab-all" role="tab">All Categories</a>
<a class="nav-link active" onclick="product_category('1'); return false;" id="tab-1" data-toggle="tab" href="#tab-1" role="tab">Category 1</a>

<a class="nav-link active" onclick="product_category('2'); return false;" id="tab-2" data-toggle="tab" href="#tab-2" role="tab">Category 2</a>

<a class="nav-link active" onclick="product_category('3'); return false;" id="tab-3" data-toggle="tab" href="#tab-3" role="tab">Category 1</a>



<div class="row justify-content-center" id="category">
</div>

<script>
function product_category(id){
    $.ajax({
        url: "<?php echo base_url('main/getValues/');?>"+id,
        dataType: 'json',
        type: "POST",
        cache: false,
        success:function(data){
            var len = data.results.length;
            for (var i = 0; i< len; i++) {
                var id  = data.results[i].id;
                var thumbnail  = data.results[i].thumbnail;
                $("#category").append("<div class='col'><div class=''><img class='' src='"+site_url+'uploads/products/'+id+'/thumb_'+ thumbnail +"'></div></div>");
            }
        }
    });
}
</script> 


Controller:

PHP Code:

function getValues($id=''){
        $data['results'] = $this->products_model->get_product_by_category($id);
        $this->output->set_content_type('application/json');
        $this->output->set_output(json_encode($data));
        return $data;
    } 


Model:

PHP Code:

public function get_product_by_category($id = '')
    {
        $this->db->select('*');
        $this->db->where('category', $id);
        $products = $this->db->get('products')->result();

        return $products;
    } 


1. Empty #category before appending data

PHP Code:

var len = data.results.length;
$("#category").empty();
... 


2. Call product_category on the first run.

Code:

product_category('');
</script>

You can remove all elements inside the div using $("#category").empty(); . So when your PHP send data to ajax call, the first thing is

PHP Code:

$("#category").empty();. 


To show all categories you can do it maybe static. So you can do a foreach like that:

PHP Code:

<div class="row justify-content-center" id="category">
<?php foreach($categories as $category): ?>
elements html etc etc
<?php endforeach; ?>
</div> 


This should work

Thanks you so much jreklund!

also theedo.... thanks

Problem solved!

Please edit your forum topic and add [SOLVED] to the Title.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )