From: Ryan de Laplante <ryan_at_ijws.com>
Date: Tue, 03 Jun 2008 16:30:41 -0400

Hi,

I created a new NetBeans 6.0.1 web project with Visual Web and am trying
to create a sample application where there are three dropdown lists. As
the user selects an item in the first list, the second list enables and
shows data associated with the selection. As the user selects an item
in the second dropdown list, the third one enables and displays data
associated with the selection. If the user selects a different item
from the first dropdown list, the third dropdown list is cleared and
disabled. I'm using AJAX features to avoid form submits.

I've got this working, except the enable/disable part. I can see the
components enable/disable when I want to, but then they always revert
back to enabled immediately after. I've spent a few hours trying
different things and can't figure it out.

JSP:

in the head section:

<webuijsf:script>
                        function init() {
                            dropDown2.setProps({disabled: true});
                            dropDown3.setProps({disabled: true});
                        }

                        function dropDown1Changed() {
                            var dropDown2 =
document.getElementById('form1:dropDown2');
                            dropDown2.setProps({disable: false});
                            dropDown2.refresh('form1:dropDown1');
                            dropDown2.focus();

                            var dropDown3 =
document.getElementById('form1:dropDown3');
                            dropDown3.setProps({disabled: true});
                            dropDown3.refresh('');
                        }

                        function dropDown2Changed() {
                            var dropDown3 =
document.getElementById('form1:dropDown3');
                            dropDown3.setProps({disabled: false});
                            dropDown3.refresh('form1:dropDown2');
                            dropDown3.focus();
                        }
                    </webuijsf:script>

Inside the body:

<webuijsf:dropDown binding="#{Page1.dropDown1}" id="dropDown1"
items="#{Page1.list1}" label="Proximity To Elevator"
labelOnTop="true"
                            onChange="dropDown1Changed(); return false;"
                            style="position: absolute; left: 120px; top:
48px"
valueChangeListenerExpression="#{Page1.dropDown1_processValueChange}"/>
                        <webuijsf:dropDown binding="#{Page1.dropDown2}"
id="dropDown2" items="#{Page1.list2}" label="Floor" labelOnTop="true"
                            onChange="dropDown2Changed(); return
false;"
                            style="left: 120px; top: 96px; position:
absolute"
valueChangeListenerExpression="#{Page1.dropDown2_processValueChange}"/>
                        <webuijsf:dropDown binding="#{Page1.dropDown3}"
id="dropDown3" items="#{Page1.list3}" label="Bed Type" labelOnTop="true"
                            style="left: 120px; top: 144px; position:
absolute"
valueChangeListenerExpression="#{Page1.dropDown3_processValueChange}"/>

My value change listeners just look at the selected value and update the
other dropdown list options.


Thanks,
Ryan