Disable a button without changing its appearance

1
votes

I implemented a dynamic enable/disable function in a page thanks to a javascript function calling a backing java bean method that sets to true/false a boolean, which is then used to disable (or not) a primefaces commandLink button.

Everything works fine, but I wanted to know if instead of changing the appearance of the button when is it disabled, I could keep the regular appearance (and even better, printing an alert message when trying to click it without having to render another web element).

Here are the simplified pieces of code:

Javascript function:

function enableSubmit(){
    jQuery(element).click(function(){                       
        if (condition){
            rc_enable();
        } else {
            rc_disable();
        }
     });
}

And the primefaces commandButton together with the remoteCommands:

<p:remoteCommand name="rc_disable" update="submitButton" actionListener="#{mappenBean.setDisabled}" />
<p:remoteCommand name="rc_enable" update="submitButton" actionListener="#{mappenBean.setEnabled}" />        

<h:commandLink id="submitButton" action="#{mappenBean.updateFund}" styleClass="FormButton" rendered="#{!sitzungBean.gedruckt}" disabled="#{!mappenBean.enabled}">
    ...[action listeners etc.]
    <h:outputText value="Eingaben übernehmen" />
</h:commandLink>

The java bean functions simply set the boolean to true or false.

It seems that I cannot implement a javascript click() function to display an alert if the disabled button is clicked, because once disabled it is not recognized anymore.

The primefaces version is 2.2.1 (i know...) and JSF is 2.1

Any help will be welcome, thanks a lot!

3
javascriptprimefacesjsf-2
Yes, if something is disabled, you can not click it. Unclear what your issue is exactly. So if you do not want to disable it, than add a click handler to it and cancel the event and do whatever. - epascarello
Thank you for your response. Can I implement a click handler that prevents the action specified in the commandLink button (and all the action listeners) from being called? - zelig
Yes you can... return false in the clickhandler, just like you would in plain javascript/jquery-ui. And you can still do a javascript 'alert' - Kukeltje
Great it works. One comment though: answers should be in answers, not in edits of the question. Please correct this. - Kukeltje
But keep in mind that this is a fake and insecure way of disabling. People with a browser developer tool can easily circumvent this. There is a very good and valid reason JSF does all this serverside (never trust the client). It might better be done the other way around. Disable it server side and via css 'enable' it visually and clickable client side!!! - Kukeltje

3 Answers

0
votes

you can add css class to the button to be disabled and disable mouse events

.disabled-button{
  pointer-events: none;
}

it wont change the appearance but it will do the trick

0
votes

You can put a validate function (client side) to check if the condition is true/false and then show the message or submit the action.

  1. First remove the disabled="#{!mappenBean.enabled}" The button will be always enable. But it will not be submitted if the condition is false.

  2. Add an onclick="return validate();" to your commandLink

  3. Create a javascript function and a dialog for the message.

            <script type= "text/javascript">
        function validate(){
            if(condition){
                dialogMessage.show(); // or an alert 
                return true;
            }else{
                return false;
            }
         </script>

  4. Your xhtml will be something like this:

             <h:commandLink id="submitButton" action="#{mappenBean.updateFund}" styleClass="FormButton" rendered="#{!sitzungBean.gedruckt}" onclick="return validate();" >
             ...[action listeners etc.]
             <h:outputText value="Eingaben übernehmen" />
         </h:commandLink>
0
votes

I finally managed to do so by adding a click handler on the commandLink with the following code:

onclick="if(#{!mappenBean.enabled}) {alert('test'); return false;}"

However, as Kukeltje pointed out:

But keep in mind that this is a fake and insecure way of disabling. People with a browser developer tool can easily circumvent this. There is a very good and valid reason JSF does all this serverside (never trust the client). It might better be done the other way around. Disable it server side and via css 'enable' it visually and clickable client side!!!

I will keep it running that way for now as it was urgent and I will try and implement the right way of doing it.

Thanks a lot to everyone for your help!