1

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

Improve this question
4
  • 1
    A <p:commandButton> 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 <h:form> 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). Commented Mar 25, 2015 at 10:57
  • 1
    Moreover, PrimeFaces is a jQuery based JSF component library. Manually including jQuery is totally unnecessary and would only lead to conflicts. Commented Mar 25, 2015 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. Commented Mar 25, 2015 at 12:26
  • This is still applicable to <h:commandButton>s. An <h:commandButton> 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. Commented Mar 25, 2015 at 22:33

2 Answers 2

Reset to default
1

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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@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. :(
@BalusC you're totally right, I'm sorry for hurrying up , i have just updated my answer. Sorry again.
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.
0

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" />
Improve this answer

3 Comments

Thank you. That outputScript tag is working, I checked it with alert. It is working. But button is still not disabling :(
check your browser console, do you find any errors ?
add prependId="false" to your <h:form>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.