Cascading combobox with PHP and javascript

[maxiim]

I have a database table with categories and subcategories. I want to use a cascading comboboxes for choosing subcategories but it is not working. i.e. if I choose the category "a" in first comobox, second combobox would appear with subcategory "a-a"...

 

Table example:

 

'categories' ('id', 'parent', 'wholeName')

(1, 0, a)

(2, 0, b)

(3, 0, c)

(4, 1, a-a)

(5, 2, b-b)

(6, 3, c-c)

(7, 4, a-a-a)

 

 

PHP function:

 

function getSelectFromTree( $forTheSearchForm = FALSE, $noFilter=FALSE, $attrs="" )
{
    global $gorumroll;
    
    $_S = & new AppSettings();
    hasAdminRights($isAdm);
    $itemNumCond = $_S->cascadingCategorySelectEnabled() && $gorumroll->list!="customlist" && $forTheSearchForm ? "AND itemNum>0" : "";
    if( !$attrs ) $attrs = "id, name, parent, sortId, wholeName, allowAd, allowSubmitAdAdmin, itemNum, recursive, subCatNum";
    if( $_S->permaLinksEnabled() ) $attrs.=", permaLink";
    $query = "SELECT * FROM @category WHERE parent=0 $itemNumCond ORDER BY wholeName ASC";
    G::load( $cats, $query );
    if( $_S->cascadingCategorySelectEnabled()  && $gorumroll->list!="customlist"  && $gorumroll->rollid!=="alternative") return $cats;
    $cat = new AppCategory();
    $tree = & $cat->getCategoryTree( $cats, $attrs );
    if( $noFilter ) $cond = FALSE;
    else
    {
        $cond = $isAdm ? '$node["cat"]->allowAd==1' : '$node["cat"]->allowAd==1 && $node["cat"]->allowSubmitAdAdmin==0';
        if( $forTheSearchForm ) $cond.= ' && $node["cat"]->itemNum>0';
        $cond = "(($cond) || \$node['cat']->recursive)";
    }
    $categories = array();
    $cat->getArrayFromCategoryTree($tree, $categories, $cond, 0);
    return $categories;
}

 

Javascript code:

 

$JQ.extend($JQ.test, {
    addNextSelectRow: function(url, subCategoryLabel, tableId)
    {
        $JQ.addNextSelectRowCore = function()
        {
            tableId = '#' + tableId;
            var cid = this.options[this.selectedIndex].value;
            var allowAd = $JQ(this.options[this.selectedIndex]).attr('rel');
            if( typeof allowAd=='undefined' ) allowAd=0;
            var container = $JQ(this).closest('tr');
            var rows = $JQ(tableId + ' tbody').eq(0).find('tr');                    
            for( var i=rows.index(container)+1; i<rows.length; i++ ) rows.eq(i).remove();
            if( cid!=0 )
            {
                $JQ(tableId + ' input:submit').hide();
                $JQ(tableId + ' .submitfooter').append($JQ(loadingAnimation)); 
                $JQ.getJSON(url+cid, '', function(data){
                    $JQ('.loadingAnimation').remove();
                    if( data.fields!='' )
                    {
                        container.clone(true).insertAfter(container).find('select').html(data.fields).end()
                                                                    .find('.label').html(subCategoryLabel);                            
                    }
                    if( data.allowAd=='1' ) 
                    {
                        $JQ(tableId + ' input:submit').eq(0).show();
                    }
                    else 
                    {
                        $JQ(tableId + ' input:submit').eq(0).hide();
                        $JQ(tableId + ' input:submit').eq(1).show();
                    }
                });
            }
            else
            {
                if( allowAd==0 ) 
                {
                    $JQ(tableId + ' input:submit').eq(0).hide();
                    $JQ(tableId + ' input:submit').eq(1).show();
                }     
                else
                {
                    $JQ(tableId + ' input:submit').eq(0).show();
                    $JQ(tableId + ' input:submit').eq(1).hide();
                }     
            }
        }
    },
    cascadingSelectOnLoad: function(tableId)
    {
        tableId = '#' + tableId;
        $JQ('[id^=cid]').livequery('change', $JQ.addNextSelectRowCore);    
        $JQ(tableId + ' input:submit').eq(0).click(function(e){
            var selects = $JQ(e.target).closest('form').find('select:[name=cid]');
            var select = selects[selects.length-1];
            var cid = select.options[select.selectedIndex].value;
            if( cid==0 )
            {
                select = selects[selects.length-2];
                cid = select.options[select.selectedIndex].value;
            }
            if( !cid ) return true;
            var href = location.href;
            location.href = href.replace(/\/?\d*$/, '/'+cid);
            return false;
        });
    },

    simpleCategoryReload: function()
    {
        $JQ('#cid').change(function (){
            var cid = this.options[this.selectedIndex].value;
            var href = location.href;
            location.href = href.replace(/\/?\d*$/, '/'+cid);
        });  
    }
});

 

Please help. Thank you!