+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Color and Size Filter (/showthread.php?tid=70362)
Color and Size Filter - msz900 - 03-30-2018
Hi
I searched a lot for my issues, but did not find what I want, I also Posted a Question on stackOverflow but did not get the response and then I just got here and hope may be someone have the same issue in past or have some sort of code which will help me to fix my issue.
I have a filter section, where user can filter product by Size, Color etc. I somehow did the filter code but now I am stuck in the ajax issue. Issue is that When color or size checkbox is empty then it throw error of foreach loop
Code:
[color=#6c6c6c][size=small][font=Arial, sans-serif]Severity: Warning[/font][/size][/color]
[color=#6c6c6c][size=small][font=Arial, sans-serif]Message: Invalid argument supplied for foreach()[/font][/size][/color]I know the error is because of empty data in variable. There is also an issue in my query. The filter result is not 100% correct and I say that because I did
Code:
[code]var_dump($query) . I also need to control the empty or null section, like if the checkbox is unchecked then it will not send / post the value to the controller...
My Ajax Code
Code:
var selected = new Array();
var size = new Array();
var url="<?php echo base_url('Cart/filt_color');?>";
function clr(){
// alert(url);
$("input:checkbox[name=color]:checked").each(function() {
selected.push($(this).val());
//console.log(selected);
});
// Sizes
$("input:checkbox[name=size]:checked").each(function() {
size.push($(this).val());
//console.log(selected);
});
$.ajax({
url:url,
method:"post",
data:{'colors':selected,'sizes':size},
success:function(data)
{
//
//console.log(data);
$("#mdv").html(data);
}
});
}My view code
Code:
<!-- Color -->
<div class="widget filter-by-color">
<h3 class="widget-title heading uppercase relative bottom-line full-grey">Color</h3>
<ul class="color-select list-dividers">
<li>
<input type="checkbox" class="input-checkbox" id="green-color" name="color" value="g" onchange="clr();">
<label for="green-color" class="checkbox-label">Green</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="red-color" name="color" value="r" onchange="clr();">
<label for="red-color" class="checkbox-label">Red</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="blue-color" name="color" value="bl" onchange="clr();">
<label for="blue-color" class="checkbox-label">Blue</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="white-color" name="color" value="w" onchange="clr();">
<label for="white-color" class="checkbox-label">White</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="black-color" name="color" value="bk" onchange="clr();">
<label for="black-color" class="checkbox-label">Black</label>
</li>
</ul>
</div>
<!-- Size -->
<div class="widget filter-by-size">
<h3 class="widget-title heading uppercase relative bottom-line full-grey">Size</h3>
<ul class="size-select list-dividers">
<li>
<input type="checkbox" class="input-checkbox" id="small-size" value="sm" name="size" onchange="clr();">
<label for="small-size" class="checkbox-label">S</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="medium-size" value="me" name="size" onchange="clr();">
<label for="medium-size" class="checkbox-label">M</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="large-size" value="l" name="size" onchange="clr();">
<label for="large-size" class="checkbox-label">L</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="xlarge-size" value="xl" name="size" onchange="clr();">
<label for="xlarge-size" class="checkbox-label">XL</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="xxlarge-size" value="xxl" name="size" onchange="clr();">
<label for="xxlarge-size" class="checkbox-label">XXL</label>
</li>
</ul>
</div>My Controller Code
PHP Code:
function filt_color()
{
$colors=$this->input->post('colors');
$sizes=$this->input->post('sizes');
if($colors !=='' || $sizes !=='')
{
// $value=json_decode($this->input->post('colors')->json,true);//second parameter true will return as array.
//echo $value['gr'];
// echo json_encode($colors);
$dataa= $this->crt->cfilter($colors,$sizes);
// var_dump($dataa);
//
if($dataa)
{
$output="";
if(is_array($dataa))
{
foreach($dataa as $product){
$output.='<div class="col-md-4 col-xs-6 product product-grid">
<div class="product-item">
<div class="product-img">';
$output.='<a href="'.base_url().'">.';
$output.='<img src="'.base_url().'products/'.$product->product_image.'" alt="">';
$output.='</a>
<div class="product-label">
<span class="sale">sale</span>
</div>
<div class="product-actions">
<a href="http://deothemes.com/envato/gaze/html/shop-catalog.html#" class="product-add-to-compare" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to compare">
<i class="fa fa-exchange"></i>
</a>
<a href="http://deothemes.com/envato/gaze/html/shop-catalog.html#" class="product-add-to-wishlist" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to wishlist">
<i class="fa fa-heart"></i>
</a>
</div>';
$output.='<a href="'.base_url().'product/'.$product->product_id.'" class="product-quickview">Quick View</a>
</div>
<div class="product-details">
<h3>';
$output.='<a class="product-title" href="'.base_url().'product/'.$product->product_id.'">'.$product->product_name.'</a>
</h3>
<span class="price">
<del>'
.'<span>'. $product->product_price.'</span>'
.'</del>
<ins>
<span class="ammount">'.$product->product_price.'</span>
</ins>
</span>
</div>
</div>
</div> <!-- end product -->';
}
}
echo $output;
}
//
//echo $dataa;
}
else
{
echo "noting is available";
}
}
My Model Code
PHP Code:
function cfilter($colors,$sizes)
{
$w='';$b='';$bl='';$r='';$g='';
$sm='';$me='';$l='';$xl='';$xxl='';
// Colors Foreach
foreach($colors as $item)
{
if(strpos($item, "bl" ) !== false )
{
$bl=1;
$this->db->where('p_attributes.color_bl',$bl);
}
if(strpos($item, "bk" ) !== false )
{
$b=1;
$this->db->where('p_attributes.color_b',$b);
}
if(strpos($item, "r" ) !== false )
{
$r=1;
$this->db->where('p_attributes.color_r',$r);
}
if(strpos($item, "g" ) !== false )
{
$g=1;
$this->db->where('p_attributes.color_g',$g);
}
if(strpos($item, "w" ) !== false )
{
$w=1;
$this->db->where('p_attributes.color_w',$w);
}
}
// Size Foreach
foreach($sizes as $size)
{
if(strpos($size, "sm" ) !== false )
{
$sm=1;
$this->db->where('p_attributes.size_sm',$sm);
}
if(strpos($size, "me" ) !== false )
{
$me=1;
$this->db->where('p_attributes.size_me',$me);
}
if(strpos($size, "l" ) !== false )
{
$l=1;
$this->db->where('p_attributes.size_l',$l);
}
if(strpos($size, "xl" ) !== false )
{
$xl=1;
$this->db->where('p_attributes.size_xl',$xl);
}
if(strpos($size, "xxl" ) !== false )
{
$xxl=1;
$this->db->where('p_attributes.size_xxl',$xxl);
}
}
// DB Query
$this->db->select('*');
$this->db->from('product');
$this->db->join('p_attributes', 'product.product_id=p_attributes.product_id','inner');
$query = $this->db->get();
var_dump($query);
return $query->result();
}
For graphical result please review the attach images / links.
![[Image: M03vwvm]](https://imgur.com/M03vwvm)
![[Image: ivkKdez]](https://imgur.com/ivkKdez)
![[Image: KiOw9FR]](https://imgur.com/KiOw9FR)
![[Image: wjXbu]](https://imgur.com/a/wjXbu)
if the images will not show then these are the links:
https://imgur.com/M03vwvm p_attributes table
https://imgur.com/ivkKdez product table
https://imgur.com/KiOw9FR Console result
https://imgur.com/VqfGiEY Var_dump($query) result
Please post your ideas / codes / helpful links anything you can, Please make sure to use the CI Active Records for queries, because I don’t want to do it in plain query.
Any help will be highly appreciated.
Thanks.
[/code]
RE: Color and Size Filter - InsiteFX - 03-31-2018
Check boxes and radio buttons have no setting at all if they are not checked.
You need to first check to see if the check box or radio button is checked
or empty before you do anything else in your code.
PHP Code:
if ( ! empty($this->input->post("checkBoxName")))
{
echo "Checkbox is checked";
}
else
{
echo "Checkbox is unchecked.";
}
You could also us isset etc;
The thing is you need to check to make sure it is checked.
RE: Color and Size Filter - msz900 - 03-31-2018
(03-31-2018, 04:07 AM)InsiteFX Wrote: Check boxes and radio buttons have no setting at all if they are not checked.
You need to first check to see if the check box or radio button is checked
or empty before you do anything else in your code.
Yes I am doing that while posting data. But I don't know ho to validate / check Ajax Data variable for empty before posting.
Like:
Code:
function clr(){
[color=#333333][font=monospace] // alert(url);[/font][/color]
[color=#333333][font=monospace] $("input:checkbox[name=color]:checked").each(function() {[/font][/color]
[color=#333333][font=monospace] selected.push($(this).val());[/font][/color]
[color=#333333][font=monospace] //console.log(selected);[/font][/color]
[color=#333333][font=monospace] });[/font][/color]
[color=#333333][font=monospace] // Sizes [/font][/color]
[color=#333333][font=monospace] $("input:checkbox[name=size]:checked").each(function() {[/font][/color]
[color=#333333][font=monospace] size.push($(this).val());[/font][/color]
[color=#333333][font=monospace] //console.log(selected);[/font][/color]
[color=#333333][font=monospace] });[/font][/color]
[color=#333333][font=monospace] $.ajax({[/font][/color]
[color=#333333][font=monospace] url:url,[/font][/color]
[color=#333333][font=monospace] method:"post",[/font][/color]
[color=#333333][font=monospace] data:{'colors':selected,'sizes':size},[/font][/color]
[color=#333333][font=monospace] success:function(data)[/font][/color]
[color=#333333][font=monospace] {[/font][/color]
[color=#333333][font=monospace]// [/font][/color]
[color=#333333][font=monospace] //console.log(data);[/font][/color]
[color=#333333][font=monospace] $("#mdv").html(data);[/font][/color]
[color=#333333][font=monospace] [/font][/color]
[color=#333333][font=monospace] }[/font][/color]
[color=#333333][font=monospace] [/font][/color]
[color=#333333][font=monospace] });[/font][/color]
[color=#333333][font=monospace] [/font][/color]
[color=#333333][font=monospace] [/font][/color]
[color=#333333][font=monospace] [/font][/color]
}but I don't know how to get / validate it, like
data.color.length<0 or data.color !=='' etc.
RE: Color and Size Filter - InsiteFX - 04-01-2018
See this article
JavaScript: Form Validation using Ajax
RE: Color and Size Filter - msz900 - 04-01-2018
(04-01-2018, 04:15 AM)InsiteFX Wrote: See this article
JavaScript: Form Validation using Ajax
Did you check the var_dump screen shot? The query is also returning wrong result..
https://imgur.com/VqfGiEY