Color and Size Filter

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) 

and the Query I get is wrong [ I am sure of it 100% ]. I have attach the var_dump() result for reference and clearness,
. 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.




 

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]

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.

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

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

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.

See this article

JavaScript: Form Validation using Ajax

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

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

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