Creating combobox and checkboxes with jQuery and CodeIgniter

Question

I have combobox named catid, which is filled with categories. On change, I am filling the content on other 2 comboboxes and I am adding checkboxes in my form, which are all based on selected category.

So three comboboxes in total, categories (#catid), subcategories (#catid2) and manufacturers (#manufacturerid) in this order.

When there are no subcategories, everything is nice and smooth. In the subcategory combobox, i get the message there are no subcategories, i am filling the manufacturers combobox with manufacturers from that category, and i am drawing the comboboxes again related to this category.

Problem arise when sub category exist. I am trying using on change event to fetch my checkboxes, related to that subcategory. I get undefined value.

Here is my code:

Controller:

 public function __construct() {
        parent::__construct();
        $this->load->model('addsCategoriesModel');
        $this->load->model('addsTypesModel');
        $this->load->model('colorsModel');
        $this->load->model('geographicAreasModel');
        $this->load->model('categoriesFiltersModel');
    }

    // function index has been ommited for the sake of simplicity

     function get_dropdown_values($catid){
         $this->load->model('manufacturersModel');
         $this->db->select('manufacturerid,manufacturername');
         $this->db->where("catid = $catid");
         $result = $this->manufacturersModel->get();

         //echo form_dropdown('manufactirerid', $result, NULL, 'id="manufacturerid"');
         echo "<select name='manufacturerid' id='manufacturerid' class='styled_select'>";
          //"<option value=".$result[]['manufacturerid'].">".$result[]['manufacturername']

         foreach ($result as $key=>$value) {
             echo "<option value=".$key['manufacturerid'].">".$value['manufacturername']."</option>";
         }
         echo "</select>";
     }
      function get_dropdown_values2($catid){
         // create the second drop down, where parent id is the selected category
         $this->db->select('catid,parentid,categoryname');
         $this->db->where("parentid = $catid");
         $result2 = $this->addsCategoriesModel->get();
         if(count($result2) > 0){
         echo "<select name='catid2' id='catid2' class='styled_select'>";
         foreach ($result2 as $key=>$value) {
             echo "<option value=".$key['catid'].">".$value['categoryname']."</option>";
         }
         echo "</select>";
         } else {
            echo "<select name='catid2' id='catid2' class='styled_select'>"; 
            echo "<option value='0'>No subcategories</option>";
            echo "</select>";
         }   
    }


    function get_categories_filters($catid3){

        // create the checkboxes according to selected category

        // case 1: if the category id is NOT 4
            $this->db->where("catid = $catid3");
            $result3 = $this->categoriesFiltersModel->get();
            if(count($result3) > 0){
                // start the foreach loop
                foreach($result3 as $key=>$value){
                    echo "<div class='chb_group'>";
                    echo "<span class='custom_chb_wrapper'>";
            echo "<input type='checkbox' name=" .$value['filterid'] ." class='zcheckbox'/>";
            echo "<label>" .$value['filtername']. "</label>";
            echo "</span>";
                    echo "</div>";
                }
            } else {
                $result3 = "No checkboxes in this category"; 
                echo $result3;
                //$this->get_categories_filters2(22);
            }
    }

    function get_categories_filters2($catid4){
        // create the checkboxes according to selected category
        $this->db->where("catid = $catid4");
        $result4 = $this->categoriesFiltersModel->get();
        if(count($result4) > 0){

            // start the foreach loop
            foreach($result4 as $key=>$value){
                echo "<div class='chb_group'>";
                echo "<span class='custom_chb_wrapper'>";
            echo "<input type='checkbox' name=" .$value['filterid'] ." class='zcheckbox'/>";
        echo "<label>" .$value['filtername']. "</label>";
        echo "</span>";
                echo "</div>";
            }
        } else {
            //$result4 = "No checkboxes in this category"; 
            $result4 = "Are you in filters2??"; 
            echo $result4;
        }
    }    
}

Here is my view:

<select name="catid" id="catid" class="styled_select" onchange="load_dropdown_content($('#manufacturerid'), this.value);load_dropdown_content2($('#catid2'), this.value);load_dropdown_content3($('#catid3'), this.value);">

    <option value="0">Please select</option>
     <?php
       // foreach loop to fetch the categories
       foreach ($adds_categories as $category){
       echo "<option value=".$category['catid'].">".$category['categoryname']."</option>";
       }
       ?>

</select>
</div>

       <div class="select_wrapper">
   <label><strong>Subcategory: </strong></label>                                                     
       <select name="catid2" id="catid2" class="styled_select" onchange="load_dropdown_content4($('#catid3'), this.value);">

        <option value="0">Please select</option>                
    </select>                              
        </div>

For the sake of simplicity, I am not showing here the manufactirer combobox, with which i have no problem whatsoever and the checkboxes

And the javascript:

<script type="text/javascript">

   function load_dropdown_content(field_dropdown, selected_value){
   var result = $.ajax({
   'url' : '<?php echo site_url('submit/get_dropdown_values'); ?>/' + selected_value,
   'async' : false
   }).responseText;
   field_dropdown.replaceWith(result);
   }

   function load_dropdown_content2(field_dropdown, selected_value){
   var result2 = $.ajax({
   'url' : '<?php echo site_url('submit/get_dropdown_values2'); ?>/' + selected_value,
   'async' : false
   }).responseText;
   field_dropdown.replaceWith(result2);
   }

   function load_dropdown_content3(field_dropdown, selected_value){
   if(selected_value == 4){
   load_dropdown_content4();
   }
   var result3 = $.ajax({
   'url' : '<?php echo site_url('submit/get_categories_filters'); ?>/' + selected_value,
   'async' : false
   }).responseText;
   $('#catid3').empty();      // DIV CATID3 IS THE DIV WHERE CHECKBOXES ARE CREATED
   $("#catid3").append(result3);
   } 

   function load_dropdown_content4(field_dropdown, selected_value){

   var result4 = $.ajax({
   'url' : '<?php echo site_url('submit/get_categories_filters2'); ?>/' + selected_value,
   'async' : false
   }).responseText;
   $('#catid3').empty();    // DIV CATID3 IS THE DIV WHERE CHECKBOXES ARE CREATED
   $("#catid3").append(result4);
   alert(result4);
   }     
   </script>

If anyone can help me to overcome that undefined error which I am getting from subcategories combobox, I will deeply appreciated.

Regards...

Answer 1

Instead of $("$cat3"), you can do like below also.

onchange = 'load_dropdown_content4("cat3",this.value)'

In load_dropdown_content4

function load_dropdown_content4(field_dropdown, selected_value)
{
   //replace field_dropdown.replaceWith(result2);
   $("#"+field_dropdown).replaceWith(result2); 
}

Try this code.