jquery is not working for making command button enable/disable in JSF

Question

Here is my query. I am designing UI (in JSF) for license agreement page where "next" button will be enabled or disabled based on user's choice for accepting or denying the license agreement. Accept and decline buttons are radio buttons. I am using jquery for that. Here is jquery snippet:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    $('#pg2\\:accept').click(function() {
        alert("hello");
        if ($(this).is(':checked'))
            $('#next').removeAttr('disabled');
        else
            $('#next').attr('disabled', 'disabled');    
    });
    }
</script>

Here is my JSF code:

<h:panelgroup id="pg2">
    <h:selectOneRadio id="radios" layout="pageDirection">
        <f:selectItem id="accept" itemValue="#{true}" itemLabel=ACCEPT/>
        <f:selectItem id="decline" itemValue="#{false}" itemLabel=DECLINE/>
    </h:selectOneRadio>
</h:panelGroup>

<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" />

Edit: replaced primefaces components with Jsf components as I cant use primefaces in my code

A `` has its own `disabled` attribute which you can set based on a condition. There should not be a need to fiddle around with extra JavaScript/jQuery code. (In this case, the `id` may have been prepended unless you set `prependId` of `` to `false` which in turn, is nasty and should always be left untouched (to `true` as default). It is not simply `next`. Looking into the rendered HTML would help obtain the correct `id` corresponding to the button). — Tiny, Mar 25 '15 at 10:57
Moreover, PrimeFaces is a jQuery based JSF component library. Manually including jQuery is totally unnecessary and would only lead to conflicts. — BalusC, Mar 25 '15 at 11:59
I will replace primeface component with jsf component as I need to have jquery essentially.I recently got to know that I cant use primefaces in my code. — Shubhangi Garg, Mar 25 '15 at 12:26
This is still applicable to ``s. An `` also has a `disabled` attribute that requires a boolean value which you can set conditionally. If you disable a component only on the client-side using JavaScript/jQuery, its server-side state will nevertheless remain active and be exploitable. — Tiny, Mar 25 '15 at 22:33

score 1 · Answer 1 · edited Mar 26 '15 at 12:51

Using disabled attribute of <p:commandButton> as mentioned by tiny you can use it to control the disable/enable of this button, you need to use ajax call using <f:ajax> in your <h:selectOneRadio> after assigning it a value in your bean like this value="#{myBean.booleanVar}" and using render attribute and assigning your button's id it will enabled/disabled upon your choice.

in your xhtml

<h:panelGroup id="pg2">
    <h:selectOneRadio id="radios" value="#{myBean.disableButton}" layout="pageDirection">
        <f:selectItem id="accept" itemValue="#{true}" itemLabel="ACCEPT"/>
        <f:selectItem id="decline" itemValue="#{false}" itemLabel="DECLINE"/>
        <f:ajax render="next" execute="@this"/>
    </h:selectOneRadio>
</h:panelGroup>
<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" disabled="#{!myBean.disableButton}"/>

in bean

private boolean disableButton;

// setter / getter

public boolean isDisableButton() {
    return disableButton;
}

public void setDisableButton(boolean disableButton) {
    this.disableButton = disableButton;
}

@BalusC: yes i tried your approach too..but its not working. Moreover I have to perform this task using jquery only. Even If I need to replace primefaces component with jsf component, that will also do. But jquery is mandatory. :( — Shubhangi Garg, Mar 25 '15 at 12:25
@BalusC you're totally right, I'm sorry for hurrying up , i have just updated my answer. Sorry again. — Scorpion, Mar 25 '15 at 12:35
You still dint get what I am asking. I have to perform this task using jquery only. See the jquery snippet I posted in the question. I have to perform this task using jquery only. Not with ajax. — Shubhangi Garg, Mar 25 '15 at 13:08

score 0 · Answer 2 · answered Mar 25 '15 at 21:06

Its not right approach to use jquery with jsf for such task because "disabled" attribute of h:commandButton can serve the purpose.

You should go with "disabled" attribute to achieve this functionality.(As Tiny suggested in comments)

However if you have strong requirement to use jquery for this task then you can achieve it by following :

Since you are loading jquery from cdn you have to use <script> tag to load it. (However in jsf <h:outputScript> is recommended to load jquery from localsystem) and use <h:outputScript> to write custom script.

Load jquery and custom script as below :

<h:head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h:outputScript>
    $(document).ready(function() {
        $('#next').attr('disabled', 'disabled'); 
        $("input:radio[value='true']").click(function() {
            $('#next').removeAttr('disabled');
        });
        $("input:radio[value='false']").click(function() {
            $('#next').attr('disabled', 'disabled');   
        });
     });
</h:outputScript>
</h:head>

There is typo in your <h:panelgroup id="pg2"> it should be <h:panelGroup id="pg2" > and "itemLabel" attribute accept String type value.

So your jsf code would be :

<h:panelGroup id="pg2">
   <h:selectOneRadio id="radios" layout="pageDirection">
       <f:selectItem id="accept" itemValue="#{true}" itemLabel="ACCEPT"/>
       <f:selectItem id="decline" itemValue="#{false}" itemLabel="DECLINE"/>
   </h:selectOneRadio>
</h:panelGroup>

<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" />

Thank you. That outputScript tag is working, I checked it with alert. It is working. But button is still not disabling :( — Shubhangi Garg, Mar 26 '15 at 05:22

jquery is not working for making command button enable/disable in JSF

2 Answers2