dojo filteringselect with ajax call - how to populate select box with returned values

Question

I think I have got the difficult stuff done. I have got a form with 2 filtering select boxes. The first is populated by a hard coded array of 3 values (will make dynamic later). When I select the value, I have a json-rpc call go to my database and return me the values I want for the second box. Think of it like country selected USA — the database returns only American cities to populate second box.

This is my Javascript to populate the second text box:

function category_changed()
{
    var store = directoryBroker.getSubCategorys(document.getElementById('categoryId').value);
    store.addCallback(
        function (response)
        {
            var result = dojo.eval("(" + response + ")");
            if (typeof(result)!='undefined')
            {
                 document.getElementById('subCategoryId').disabled = false;
                 document.getElementById('subCategoryId').value = result[0].id;
            }
        }    
    );
}

This is the php for creating the form:

$category = new Zend_Dojo_Form_Element_FilteringSelect('categoryId');
    $category
        ->addMultiOption('a', '-- Please Select --')
        ->addMultiOptions($directoryModel->getAllCategorysForSelect())
        ->setValue('a')
        ->setRequired(true)
        ->setAttribs(
            array(
                'style' =>  'width: 400px',
                'onchange' => 'JavaScript: category_changed();'
            )
        )
        ->setLabel("Category:")
        ->addFilter('StringTrim')
        ->addValidator('int');


  $subCategory = new Zend_Dojo_Form_Element_FilteringSelect('subCategoryId');
    $subCategory
        ->addMultiOption('-1', '-- Select Category First --')
        ->setRequired(true)
        ->setAttribs(
            array(
                'disabled' => 'disabled',
                'onchange' => 'JavaScript: subCategory_changed();',
                'style' => 'width: 400px;'

            )
        )
        ->setLabel("Sub Category:")
        ->addValidator('int');

I have tried a few different ways of setting the value but it just wont seem to change... The result object looks like this:

result[0] "[{"name":"Test1","id":"1"}]"

All I want is "Test1" to be the value, I'm sure it's something simple but just cant see it!

Answer 1

I think what you need to do is change your calls to

document.getElementById('subCategoryId')

to a call that retrieves an instance of your actual dijit widget:

var secondaryFilteringSelect = dijit.byId('subCategoryId');

document.getElementById and dojo.byId only return the physical dom nodes of the elements, not the actual javascript widget object. You want to use dijit.byId instead.

Then, with that widget, you can use the widget's set function to set set its properties

secondaryFilteringSelect.set('disabled', false);
secondaryFilteringSelect.set('value', result[0].id);

Take a look at the FilteringSelect API Docs for more information.

Also, for adding new options to the FilteringSelect based on the change in the first menu, you'll probably want to take a look at the FilteringSelect's inherited method addOption