Creating combobox and checkboxes with jQuery and CodeIgniter - php

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.