无法使用Ajax Codeigniter选择多个值

Question

我正在CodeIgniter中开发一个电子商务平台。我正在尝试进行品牌筛选过程。我有三个类别，分别是cat1、cat2和cat3。目前，我可以在不刷新页面的情况下获取数据，但只有一个类别。我的意思是，当我点击cat1时，我可以获得cat1的结果，所以当我点击cat1时，它会给出cat1的结果，当我单击cat2时，它将给出cat1 plus cat2的结果。我已经尝试了所有可能的方法，但无法获得正确的结果，也当我uncheck或click on the selected category again时，它仍然显示本应停止从未检查类别中筛选的结果。

视图

<ul id="top--cat">
<?php foreach ($categories as $category) : ?>
<li>
<a href="javascript:void(0)">
<label>
<input type="checkbox" name="cates" class="radiochecker" onclick="cat(<?php echo $category['id'] ?>)" >
<?php echo $category['name'] ?>
</label>
</a>
</li> 
<?php endforeach; ?>    
</ul>

<div class="row" id="fetchedprodducts">
<?php foreach ($products as $pro) : ?> 
<div class="col-md-3 col-6">
<a class="all-link--pro" href="<?php echo site_url("product_view/".$pro['id']."/".$pro['slug'])?>">   
<img class="img-fluid img-size" src="<?php echo base_url("assets/img/posts/".$pro['main_img'])?>">
<p><?php echo $pro['title'] ?></p>
<p><?php echo $pro['categoryname'] ?></p>
<p>Rs. <?php echo $pro['price']; ?></p>
</a>      
</div> 
<?php endforeach; ?>
</div>

在jquery文件中

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

控制器

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 .="<div class='col-md-3 col-6'>  
<a class='all-link--pro' href='".site_url('product_view/'.$product['id']."/".$product['slug'])."'>   
<img class='img-fluid img-size' src='".base_url('assets/img/posts/'.$product['main_img'])." '>
<p>".$product['title']."</p>
<p>".$product['categoryname']." </p>
<p>Rs ".$product['price']."</p>
</a> 
</div>";
}
echo $outcome ;
// print_r($products);die;
}
}

型号

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

Answer 1

我对您的所有代码都做了一些修改。请小心更换，否则零件可能无法工作。

试试这个：

JS(删除cat和cat_filter函数-不需要(：

注：append和其他逻辑检查功能可防止重复，并在必要时删除cat

更新：添加$('.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);
}
});
});
});

控制器：

注意：请参阅添加到第一个分区的类。

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 .= "<div class='col-md-3 col-6 cat-{$brand_id}'>
<a class='all-link--pro' href='" . site_url('product_view/' . $product['id'] . "/" . $product['slug']) . "'>   
<img class='img-fluid img-size' src='" . base_url('assets/img/posts/' . $product['main_img']) . " '>
<p>" . $product['title'] . "</p>
<p>" . $product['categoryname'] . " </p>
<p>Rs " . $product['price'] . "</p>
</a> 
</div>";
}
echo $outcome;
}
}

型号：

如果没有行，则返回false。

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

视图：

注意：添加了类和data-id，删除了函数调用(不再需要(。

<label>
<input type="checkbox" name="cates" class="radiochecker cat-filter" data-id="<?php echo $category['id'] ?>">
<?php echo $category['name'] ?>
</label>

查看第2部分：注意：添加了类first-load

<div class="row" id="fetchedprodducts">
<?php foreach ($products as $pro) : ?> 
<div class="col-md-3 col-6 first-load">
<a class="all-link--pro" href="<?php echo site_url("product_view/".$pro['id']."/".$pro['slug'])?>">   
<img class="img-fluid img-size" src="<?php echo base_url("assets/img/posts/".$pro['main_img'])?>">
<p><?php echo $pro['title'] ?></p>
<p><?php echo $pro['categoryname'] ?></p>
<p>Rs. <?php echo $pro['price']; ?></p>
</a>      
</div> 
<?php endforeach; ?>
</div>