JQuery category selection table.

JQuery make js effect very easy and providing fancy techniques to do some stuff. In here we are going to explain how we can create category selection table using JQuery. Lets try to understand this using real world example. In this case we are having a table as fallow and we need to populate categories to select one or multiple for users.

DB table,

In here am using joomla coding but we can apply pure php cording to populate above table data in the side of front end.

Populate table data,

$db =& JFactory::getDBO();

       $sqlgetcatinfor="SELECT * FROM #__ci_categoriesselection GROUP BY
state";
       $db->setQuery($sqlgetcatinfor);
       $categories = $db->loadObjectList();
       //var_dump($categories);

       $stateul='';
       $tdregionul='';
       $tdcategoryul='';
       $i=1;
       foreach($categories AS $category){
           $stateul=$stateul.'';
           $sqlgetregions="SELECT * FROM #__ci_categoriesselection WHERE
state='".$category->state."' GROUP BY regions";

           $db->setQuery($sqlgetregions);
           $regions = $db->loadObjectList();
           $regionul='
 class="states" type="checkbox" id="check_state_'.$i.'"/>'.$category->state.'
                    
';
           $j=1;
           foreach($regions AS $region){
               $regionul=$regionul.'';
               $sqlgetcategory="SELECT * FROM #__ci_categoriesselection LEFT JOIN #__ci_projects_categories ON (categoryid= category_id) WHERE regions='".$region->regions."' GROUP BY category_id";
               $db->setQuery($sqlgetcategory);
               $getcategories = $db->loadObjectList();
               $categoryul='
 onclick="regionchecked(\'check_state_'.$i.'\',\'check_state_'.$i.'_region_'.$j.'\')"/>'.$region->regions.'
';
               foreach($getcategories AS $getcategory){
                   $categoryul=$categoryul.'';
               }
               $categoryul=$categoryul."";
           $tdregionul=$tdregionul.$regionul;
           $i++;
       }
       $stateul=$stateul.'
category_id.'">'.$getcategory->category.' : ('.$getcategory->price.'$)
';// End state list

In above code sample I have used three inner foreach loops and assign that information different three variables ($stateul, $regionul and $categoryul. If you check above coding sample carefully you can understand that way of how I used table names and input box ids and class names. Finally I printed above discussed three variables inside another table to populate category selection table.

echo"
'.CI_LABLES_CHECKBOX_SELECT_ALL.'
     
     
      
'.CI_LABLES_CHECKBOX_SELECT_STATES.'
      
'.CI_LABLES_CHECKBOX_SELECT_REGIONS.'
      
'.CI_LABLES_CHECKBOX_SELECT_CATEGORIES.'
           
     
      

'.$stateul.'
      

'.$tdregionul.'
      

'.$tdcategoryul.'
           
    
";

Finally I got this view.

To hide all regions and categories when first time page loading I used css "display: none" property in my css page as fallow.

table.regions, table.categoryselect{
  display: none;
}

Understanding js part,

1. For display categories with its parent when mouse over.

function categoryover(id, type){
if(type=='over_state'){
jQuery("table.regions").hide();
jQuery("table.categoryselect").hide();
}

if(type=='over_region'){
jQuery("table.categoryselect").hide();
}

jQuery("table#"+id).show();
}

Using this code segment first I hide all region and category tables. At the end of the script we execute jquery show command to display categories or regions section according to mouse over parent.

2. When user check on category, region or state.
When user check a one category we need to select its all parent items and in some situation user remove parent category this js coding need to be handy to remove its child elements also.

Mainly we have four different type of click events.

• Click on state check box
• Click on region check box
• Click on category check box
• Click on Select all check box.

In my js codding I used four methods to handle above mentioned click events.

function categorychecked(state,classid, region){

if(!jQuery('#'+state).is(':checked')){
jQuery('#'+state).attr("checked", true);
}

if(!jQuery('#'+region).is(':checked')){
jQuery('#'+region).attr("checked", true);
}
}

function regionchecked(state, classid){
if(jQuery('#'+state).is(':checked')){
}else{
jQuery('#'+state).attr("checked", true);
}

if(jQuery('#'+classid).is(':checked')){
jQuery('.'+classid).attr("checked", true);
}else{
jQuery('.'+classid).attr("checked", false);
}
}

function statechecked(id, classid){
if(jQuery('#'+id).is(':checked')){
jQuery('.'+classid).attr("checked", true);
}else{
jQuery('.'+classid).attr("checked", false);
}
}

function selectallcats(){
if(jQuery('#category_all').is(':checked')){
 jQuery('.states').attr("checked", true);
 jQuery('.regions').attr("checked", true);
 jQuery('.categories').attr("checked", true);
}else{
 jQuery('.states').attr("checked", false);
 jQuery('.regions').attr("checked", false);
 jQuery('.categories').attr("checked", false);
}
}