Disabling UI Component With ADF Faces JavaScript API
Disabling UI Component With ADF Faces JavaScript API
Following example illustrates how to disable UI component using ADF Faces Java Script API. This example disables af:inputText when you click the button.
Note that af:inputText has set unsecure="disabled" and clientComponent="true". You must set these properties appropriately to set component properties in the client side.
A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty(attribute, newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty(disabled, false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the components presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a components presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
Note that af:inputText has set unsecure="disabled" and clientComponent="true". You must set these properties appropriately to set component properties in the client side.
- unsecure
A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty(attribute, newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty(disabled, false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
- clientComponent
whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the components presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a components presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
<?xml version=1.0 encoding=UTF-8?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view >
<af:document title="test.jsf" id="d1">
<af:resource type="javascript">
function disableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", true);
//The following line is for partial refresh, in this case
//its taken care by framework
//AdfPage.PAGE.addPartialTargets(nameInputText);
actionEvent.cancel();
}
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", false);
actionEvent.cancel();
}
</af:resource>
<af:form id="f1">
<af:panelGroupLayout id="pgl1">
<af:commandButton text="Disable Name Field" id="disableBtn"
partialSubmit="true">
<af:clientListener type="action" method="disableField"/>
</af:commandButton>
<af:commandButton text="Enable Name Field" id="enableBtn"
partialSubmit="true">
<af:clientListener type="action" method="enableField"/>
</af:commandButton>
</af:panelGroupLayout>
<af:inputText unsecure="disabled" clientComponent="true" label="Name" id="nameFld"/>
</af:form>
</af:document>
</f:view>
Comments
Post a Comment