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.

  •  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>  

Comments

natalie said…
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
This comment has been removed by the author.
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).
Anonymous said…
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
N said…
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.
Jobinesh said…
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.
N said…
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.
N said…
Hey Jobinesh,

If you want, i can send the recording, please do let me know your email.
Thanks.
rnvprasad said…
This comment has been removed by the author.
Jobinesh said…
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);
Anonymous said…
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
Jobinesh said…
Akash
Check out this post http://jobinesh.blogspot.in/2012/06/hiding-unwanted-operators-in-advanced.html
Anonymous said…
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.
Hi Jobinesh,

I tried adding my .css and .js files as resources to my jsf page on JDeveloper but my Page Template stopped working after adding these files to document.

Then i tried to add them as in-page scripts but the result was the same. Do you have any idea about why this happens?

I'm using JDeveloper Studio Edition Version 11.1.2.3.0 by the way.

Thanks in advance
Unknown said…
Hi Jobinesh,

I am new to adf. can u please tell me about how to add to numbers using javascript.I want to develop calculator using adf java script?
Anonymous said…
Hi Jobinesh...thank you so much for the code. This is exactly what I am looking for. It serves my purpose of disabling the column when clicked but I want the value to be set as "LOCKED" upon disabling and this has to be updated in the database. I am very new to Jdeveloper. Can you please help me?

Thank you soo much
Shwetha :)
Anonymous said…
Hi Jobinesh...thank you so much for the code. This is exactly what I am looking for. It serves my purpose of disabling the column when clicked but I want the value to be set as "LOCKED" upon disabling and this has to be updated in the database. I am very new to Jdeveloper. Can you please help me?

Thank you soo much
Shwetha :)
Ramit Mathur said…
Hi,

I want to get value of my UI component through javascript.But i am not able to
I using this code:-
var component=actionEvent.getSource();
var id=component.getId();
alert(id.value);

Can you please tell me how i can get
Anly @ Liya said…
Hi,

I added "enableField" for the button but the "action" event is not getting triggered for the button.
Can you please tell me if I am missing out something.

Anly

Disclaimer

The views expressed on this blog are my own and do not necessarily reflect the views of my employer.