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 component's 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 component's 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 component's 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 component's 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 xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<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>
13 comments:
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Alena
Diverticulitis Treatment Diverticulitis Diet
That's cool. But to properly disable a commandButton you should do a little more. Check out this post. Also, AFAIK, disabling/enabling of af:inputDate does not work (as of ADF 11.1.1).
Thanks for the post.
How to add CompOper to an Implicit Search (Advanced Mode) as I dont see a ViewCriteria / ViewCriteriaRow for Implicit Search which comes by default
Hi Jobinesh,
The code you have pasted in the article is not working, do we need to do anything else, my usecase is i just need to enable a disabled inputtext on click of a radio button. For this i followed the same approach, but its not working. Please suggest any recommendations.
Thanks.
What is the version of JDev/ADF that you tried? Is it the same piece of code shown in my post that you tried? Its supposed to work without issues.
hey Jobinesh,
I am using PS5 JDeveloper, i just copied and pasted in the jspx page and tried. Do i need to use R2 for the above use case.
Hey Jobinesh,
If you want, i can send the recording, please do let me know your email.
Thanks.
Try adding the following to refresh the comp in enableField() and disableField() methods. You can see this line commented in the source code. Look like in PS5 you need this magic line to work.
AdfPage.PAGE.addPartialTargets(nameInputText);
Hi Jobinesh,
I wanted to know if there is a way we can display operators only in Advanced mode for only a specific attribute. I do not want to display operators for all attributes even in Advanced Mode.
Thanks,
Akash
Akash
Check out this post http://jobinesh.blogspot.in/2012/06/hiding-unwanted-operators-in-advanced.html
Jobinesh,
Does this mean my only option is to add this compoper tag for every operator to every attribute . Is there no option that can help me to add a single operator to a single attribute instead of removing all operators from all attributes ?
Thanks,
Akash.
Post a Comment