Disabling ADF Faces UI component on the client-side could be tricky sometimes. This post on Jobinesh's blog shows an example on how to disable af:inputText through javascript. You basically need to set unsecure="disabled" and clientComponent="true". But if you use button.setProperty('disabled', true) on a commandButton, your button will still look like undisabled (though it won't invoke action event), proper style class and 'disabled' attribute will not be applied to the button element.
To properly disable button you can use script like this:
To properly disable button you can use script like this:
setButtonDisabled = function (button, disabled) {
if (button instanceof AdfRichCommandButton) {
button.setProperty('disabled', disabled);
AdfDomUtils.addOrRemoveCSSClassName(disabled,
AdfRichUIPeer.getDomElementForComponent(button),
AdfRichUIPeer.DISABLED_STYLECLASS);
var buttonDom = button.getPeer().getButtonElement(button);
if (disabled) {
buttonDom.setAttribute('disabled', 'disabled');
} else {
buttonDom.removeAttribute('disabled');
}
}
}
it looks like disabled, but you can still click it and the bean handler is called.
ReplyDeleteDidn't you forget to set attribute unsecure="disabled" on the component? Otherwise, you would not be able to set "disabled" property on the client component.
DeleteThanks Daniel. I forgot the unsecure property.
DeleteThis comment has been removed by the author.
DeleteWith the below small change, it can works for some other components as well:
DeletesetDisabled = function (comp, disabled) {
comp.setProperty('disabled', disabled);
var compDom = AdfRichUIPeer.getDomElementForComponent(comp);
AdfDomUtils.addOrRemoveCSSClassName(disabled, compDom, AdfRichUIPeer.DISABLED_STYLECLASS);
if (disabled) {
compDom.setAttribute('disabled', 'disabled');
}
else {
compDom.removeAttribute('disabled');
}
}
Hi,
DeleteI ran into similar issue...The button was getting disabled but disabled style was not being applied...I took the following workaround, as I didn't come accross your blog at that time :(
Instead of setting the css manually, I used another commandtoolbarbutton which has different icon for different states - icon, hovericon, disabledicon...
It seems we don't see an disabled skin on the commandbutton because it doesn't have any...
We were using this code but found a small issue when upgrading from 11.1.1.4 to 11.1.1.7. The ADF method button.setProperty('disabled', disabled); was causing the entire page to sync with the server including re-executing several queries. This did not happen on 11.1.1.4. When I remove that line and just rely on the css style and dom element properties to disable it, it all worked fine with no ajax call going to the server.
ReplyDelete