Tuesday, April 18, 2023

Oracle ADF disable/enable button using javascript

 To enable/disable a button in a ADF page via javascript you need declare as client component and set the unsecure attribute to "disabled" as follow:

 <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
 actionListener="#{myDemoRequestBean.onActionListener}"/>  

Doing this using javascript you can disable/enable button as follow:

 var buttonId=document.querySelector('[id*="b1"]').id;  
 var button = AdfPage.PAGE.findComponentByAbsoluteId(buttonId);  
 //console.log(button);  

           button.setProperty('disabled', false);  
       

in the example I looking for the button in the page and than enable the button.

You can combine this in a complex way using an event "keyUp" or "valueChange" or other on another component

       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" >  
           <af:clientListener method="onInputText" type="keyUp"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
...........

 <af:resource type="javascript">  
     function onInputText(event){  
       console.log(event);  
       //var id = document.querySelector('[id*="'+componentId+'"]').id;  
       //console.log(id);  
       var component = event.getSource();  
       //console.log(component);  
       //console.log(component.getSubmittedValue());  
        if(component != null){  
         var buttonId=document.querySelector('[id*="b1"]').id;  
         //console.log(buttonId);  
         var button = AdfPage.PAGE.findComponentByAbsoluteId(buttonId);  
         if(component.getSubmittedValue().length > 0 ){  
           //console.log(button);  
           console.log(component.getSubmittedValue());     
           button.setProperty('disabled', false);  
         }else{  
           //console.log('else ');  
           button.setProperty('disabled', true);  
         }  
        }  
     }  
     </af:resource>  


No comments:

Post a Comment