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