users@woodstock.java.net

Re: Unable to disable components with JavaScript

From: Dan Labrecque <Dan.Labrecque_at_Sun.COM>
Date: Tue, 03 Jun 2008 16:49:54 -0400

Take a look at how the refresh feature works in the TLD for dropDown below.

http://webdev2.sun.com/woodstock-tlddocs

Example #6 states:

"Note that the refresh function can optionally take a list of elements
to execute. Thus, a comma-separated list of ids can be provided to
update components server-side: refresh("form1:id1,form2:id2,..."). When
no parameter is given, the refresh function acts as a reset. That is,
the component will be redrawn using values set server-side, but not
updated."

If you want to maintain the current selection, you must provide the ID
of the dropDown being refreshed. However, this works more like a form
submit. That is, the disabled state is not an HTML input value like a
user selection. Calling refresh like this will override the client-side
disabled state.

That said, consider calling refresh first, then set the dropDown
disabled. Alternatively, you can use a hidden field to maintain the
disabled state.

Dan

Ryan de Laplante wrote:
> 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
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe_at_woodstock.dev.java.net
> For additional commands, e-mail: users-help_at_woodstock.dev.java.net
>