unable to select multiple value using Ajax Codeigniter

Question

I'm developing an e-commerce platform in CodeIgniter. I'm trying to do the brand filtering process. I've got three categories that are cat1,cat2,cat3. Currently, I'm able to fetch the data without refreshing the page but one category only I mean when I click the cat1 I'm able to get the result of cat1 and so that other category but I want when I click the cat1 it will give cat1 result and when I click on the cat2 it will give the result cat1 plus cat2 result. I have tried every possible way I could have done but unable to get the proper result, also when I uncheck or click on the selected category again it still displays the result where it should have stopped filtering form that unchecked category.

In view

In jquery File

  function cat(id){

    $('#catid').val(id);
    cat_filter()
  }

  function cat_filter(){
    var brand_id = $('#catid').val();


    $.ajax({
        url:'http://localhost/tinta/maker/categories/get_procat',
        method:'POST',
        data:{'b_id' : brand_id},
        success:function(data){
            // console.log(data);
            $('#fetchedprodducts').html(data);
        }

    });

  }

Controller

public function get_procat(){
      $brand_id = $this->input->post('b_id');

      $products = $this->Category_model->get_product_by_cat($brand_id);
      $outcome = "";

       if($products) {

        foreach($products as $product){
            $outcome .="  
                           
                        
                        ".$product['title']."
                        ".$product['categoryname']." 
                        Rs ".$product['price']."

                        
                    ";
        }
        echo $outcome ;
      // print_r($products);die;
    }
  }

Model

public function get_product_by_cat($brand_id){


    $this->db->order_by('cv_products.id', 'DESC');
    $this->db->select('cv_products.*, cv_category.name as categoryname, product_line.name as linename,cv_category.id as category_id, delivery_time.name as timingname' );
    $this->db->join('cv_category','cv_category.id = cv_products.category', 'left');
    $this->db->join('product_line','product_line.id = cv_products.product_line', 'left');
    $this->db->join('delivery_time','delivery_time.id = cv_products.timing', 'left');
    $query= $this->db->get_where('cv_products', array('category' => $brand_id));
    return $query->result_array();
    }

Alex · Accepted Answer

I've made a few modifications to all of your code. Please replace it carefully or parts may not work.

Try this:

JS (remove cat and cat_filter functions - not required):

Note: append and other logic checking functions to prevent duplicates and to remove cats when necessary

UPDATE: added $('.first-load').remove();

$(document).ready(function () {
    $('.cat-filter').on('click', function (e) {
        // any checkboxes checked?
        if ($('.cat-filter:checked').length == 0)) {
            $('.first-load').show();
            return;
        } else {
            $('.first-load').hide();
        }
        var brand_id = $(this).attr('data-id');
        console.log('category ' + brand_id);
        // are we unchecking?
        if ($(this).prop('checked') == false) {
            console.log('category ' + brand_id + ' unchecked. hiding contents.');
            $('.cat-' + brand_id).hide();
            return;
        }
        // check if cat is already rendered
        if ($('.cat-' + brand_id).length) {
            $('.cat-' + brand_id).show();
            console.log('category ' + brand_id + ' already rendered. showing contents.');
            return;
        }
        $.ajax({
            url: 'http://localhost/tinta/maker/categories/get_procat',
            method: 'POST',
            data: {
                b_id: brand_id
            },
            success: function (data) {
                $('#fetchedprodducts').append(data);
            }
        });
    });
});

CONTROLLER:

Note: see class added to first div.

function get_procat() {
    $brand_id = $this->input->post('b_id');

    if (is_null($brand_id)) {
        exit;
    }

    $products = $this->Category_model->get_product_by_cat($brand_id);

    if ($products) {
        foreach ($products as $product) {
            $outcome .= "
                           
                        
                        " . $product['title'] . "
                        " . $product['categoryname'] . " 
                        Rs " . $product['price'] . "

                        
                    ";
        }
        echo $outcome;
    }
}

MODEL:

Returned false if no rows.

function get_product_by_cat($brand_id) {
    $this->db->order_by('cv_products.id', 'DESC');
    $this->db->select('cv_products.*, cv_category.name as categoryname, product_line.name as linename,cv_category.id as category_id, delivery_time.name as timingname');
    $this->db->join('cv_category', 'cv_category.id = cv_products.category', 'left');
    $this->db->join('product_line', 'product_line.id = cv_products.product_line', 'left');
    $this->db->join('delivery_time', 'delivery_time.id = cv_products.timing', 'left');
    $query = $this->db->get_where('cv_products', array('category' => $brand_id));
    if ($query->num_rows() > 0) {
        return $query->result_array();
    }
    return false;
}

VIEW:

Note: class added and data-id, removed function call (not needed anymore).

VIEW PART 2: Note: class first-load added

unable to select multiple value using Ajax Codeigniter

Answers (1)

Related Questions