auto-populate multiple select boxes

Hi everyone,

I made an application that have the following:
Master Categories
Categories
Products

The user is able to pick a Master Category and a dynamic page of Products (drop down list)  under their Categories shows up in the browser. There are configurations for each product that is assign by the administrator of the site. The user picks product 2 from category 1 and based on the configuration(s) of that product the next category change accordingly and show only the product(s) with the same configuration(s). I manage to make this application to work but with static data using multiple steps and forms but that way every time the client need to add a master category->categories->products, I have to create new steps with forms for the new master category->categories->products. So the clients want it dynamic and that leaves me with only one option, to use ajax that i'm not very familiar with. I have found a ajax code and trying to adapt it to the current application but without luck.

The trick to get the configuration of the product select and use it to get the products based on that configuration from the next category.
But it does not works as indented and I cant think anything more. Can someone please help?
The ajax code is using jquery 1.1.1 and is as follows:

select-chain.js
 
(function ($) {
    $.fn.selectChain = function (options) {
        var defaults = {
            key: "id",
            value: "label"
        };
        
        var settings = $.extend({}, defaults, options);
        
        if (!(settings.target instanceof $)) settings.target = $(settings.target);
        
        return this.each(function () {
            var $$ = $(this);
            
            $$.change(function () {
                var data = null;
                if (typeof settings.data == 'string') {
                    data = settings.data + '&' + this.name + '=' + $$.val();
                } else if (typeof settings.data == 'object') {
                    data = settings.data;
                    data[this.name] = $$.val();
                }
                
                settings.target.empty();
                
                $.ajax({
                    url: settings.url,
                    data: data,
                    type: (settings.type || 'get'),
                    dataType: 'json',
                    success: function (j) {
                        var options = [], i = 0, o = null;
                        
                        for (i = 0; i < j.length; i++) {
                            // required to get around IE bug (http://support.microsoft.com/?scid=kb%3Ben-us%3B276228)
                            o = document.createElement("OPTION");
                            o.value = typeof j[i] == 'object' ? j[i][settings.key] : j[i];
                            o.text = typeof j[i] == 'object' ? j[i][settings.value] : j[i];
                            settings.target.get(0).options[i] = o;
                        }
 
                        // hand control back to browser for a moment
                        setTimeout(function () {
                            settings.target
                                .find('option:first')
                                .attr('selected', 'selected')
                                .parent('select')
                                .trigger('change');
                        }, 0);
                    },
                    error: function (xhr, desc, er) {
                        // add whatever debug you want here.
                        alert("an error occurred");
                    }
                });
            });
        });
    };
})(jQuery);
 
 
the page that show the categories and the products
show_all.php
    <script type="text/javascript">
    <!--
    $(function () {
        <?php 
        	$queryA = $this->db->query('select * from categories where mastcat_id='.$_POST['mastcat_id'].'');
		
        	$totalCats =  $queryA->num_rows();
        	$i = 1;
			while ( $i < $totalCats)
			{
				echo "var cat$i = $('#cat$i');\n\t\t";
				$i++;
			}
        ?>        	
        <?php 
        	$i = 1;
        	$e = $i+1;
			while ( $i < $totalCats)
			{
		       	echo "cat$i.selectChain({
		            target: cat$e,
		            url: 'http://localhost/micro/index.php/micro/get_data',
		            data: { ajax: true, mastcat_id: \"$mastcat_id\"  }            
		        });";
		       	$i++;
		       	$e++;     
			}
			
        	echo "// note that we're assigning in reverse order
	        //to allow the chaining change trigger to work
	        cat1.selectChain({
	            target: cat2,
	            url: 'http://localhost/micro/index.php/micro/get_data',
	            data: { ajax: true, mastcat_id: \"$mastcat_id\" }
	        }).trigger('change');";
      ?>
        
    });
    //-->
    </script>
 
	foreach ($queryA->result() as $row3)
	{
		echo "<br><b>$row3->desc</b><br>\n";
		echo "<SELECT id=\"cat$i\" name=\"category\">";
		$i++;
		// get category products
		$queryB = $this->db->query('select products.id, products.desc, products.cat_id from products where mastcat_id='.$_POST['mastcat_id'].' and products.cat_id='.$row3->id.'');
			foreach ($queryB->result() as $row4){
				#echo "<option></option>";
				echo "<option value=\"$row4->id\">$row4->desc</option><br>\n";
				// get products configurations 
		
			}
		echo "</SELECT>";			
				$queryC = $this->db->query("SELECT * FROM products_config where id='$row4->id'");
					foreach ($queryC->result() as $row5)
					{
						echo "<input type=\"hidden\" name=\"$row4->id[]\" value=\"$row5->cid\">\n";
					}
		
	}
 
 
 
The file that is called by show_all.php
 
get_data.php
<?php
session_start(); 
$_SESSION['mastcat_id'] = $_GET['mastcat_id'];
 
if (@$_REQUEST['ajax']) {
	$results = $this->db->query('SELECT * FROM products WHERE mastcat_id='.	$_GET['mastcat_id'].' and products.id='.$_REQUEST['category'] .'');        
        $json = array();
        
		foreach ($results->result() as $row)
		{
			$json[] = '{"id" : "' . $row->cid . '", "label" : "' . $row->desc . '"}';
            $json[] = '"' . $row->cid . '"';
        }
        
        echo '[' . implode(',', $json) . ']';
        die(); // filthy exit, but does fine for our example.
 
 
?>
 
Mysql is as follows:
 
This table holds the categories.
Each category have a unique id, 
the master category it belongs to 
and the category description.
 
categories
id(unique)	mastcat_id	desc
1	2		category1
2	2		category2
3	2		category3
4	3		category4
5	3		category5
6	3		category6
 
This table holds the configurations
Each configuration have a unique id
and the configuration description.
 
configurations
id(unique)	desc
4	None
5	Config1
6	Config2
7	Config3
8	Config4
9	Config5
10	Config6
11	Config7
 
 
This tables holds master categories
Each master category have a unique id
and the master category description.
 
master_categories
mastcat_id(unique)	mastcat_desc
1		None
2		MastCat1
3		MastCat2
4		MastCat3
5		MastCat4
6		MastCat5
 
This table holds the products
Each product have a unique id, 
the product description
the category it belongs to 
and the master category it belongs to.
 
products
id(unique)	desc		cat_id	mastcat_id
1	Description	1	2
2	Description	1	2
3	Description	2	2
4	Description	2	2
5	Description	3	2
6	Description	3	2
7	Description	4	3
8	Description	4	3
9	Description	5	3
10	Description	5	3
11	Description	6	3
 
This tables holds the products and the configurations of each product
The field id is the product id and it's not unique,
a product will have more 2,3 or more configurations attached to it.
The field cid is the configuration id of the product
 
products_config
id	cid
1	4
1	5
1	6
2	7
2	7
2	8
2	9
3	4
3	7
3	9
3	5
4	4
4	5
4	6
4	10

Select allOpen in new window