Geek Answers Handbook

JSF button to enable / disable JSF based using javascript

I am using RichFaces and I want to enable / disable h:commandButton based on h:selectBooleanCheckbox using Javascript. By default, the button should be disabled and unchecked. The button must be enabled if the check box is checked and disabled when the box is unchecked.

Any help would be greatly appreciated.

+4
source share
4 answers

As Dmitry from Openfaces stated, enabling / disabling edge components (Primefaces, Openfaces, Richfaces ... etc.) should be done on the server side. The best solution to continue to use ajax when triggering a change event! onchange is suitable for this situation (imagine that the checkbox is checked or unchecked from the keyboard, for example)!

 <h:selecBooleanCheckbox id="box" value="#{mybean.selecteditem.booleanvalue}"......> <f:ajax execute="box" render="but" event="change" /> </h:selectBooleanCheckbox> <h:commandButton id="but" action="someAction" value="someValue" disabled="#{!mybean.selecteditem.booleanvalue}" />

Thus, when the box is unchecked, the "Team" button is disabled, but when it is installed, the button is turned on.

In the case of Application using <p:ajax /> recommended!

 <p:ajax event="change" process="box" update="but"/>

In the case of OpenFaces, both the <f:ajax /> and <o:ajax /> functions work fine.

And if you have several components for rendering at the same time, juste includes their identifiers, the space is divided:

 <f:ajax ......render="id1 id2 id3" />
+4
source

To do this, you can use a4j:support to attach the ajax view to the specific event that appears in this checkbox. e.g. OnClick.

Here is a simple example:

Bean

 public class TestBean { private boolean chkBoxChecked; public boolean isChkBoxChecked() { return chkBoxChecked; } public boolean isBtnDisabled() { return !this.chkBoxChecked; } public void setChkBoxChecked(boolean chkBoxChecked) { this.chkBoxChecked = chkBoxChecked; } }

XHTML

 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="/WEB-INF/template/default.xhtml"> <ui:define name="content"> <h:form id="frmTest"> <h:selectBooleanCheckbox id="chkBoolean" value="#{testBean.chkBoxChecked}"> <a4j:support event="onclick" ajaxSingle="true" reRender="btnSubmit"/> </h:selectBooleanCheckbox> <h:commandButton id="btnSubmit" value="Submit" disabled="#{testBean.btnDisabled}"/> </h:form> </ui:define> </ui:composition>

Or use the client approach without sending:

XHTML

 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="/WEB-INF/template/default.xhtml"> <ui:define name="head"> <script type="text/javascript"> window.onload = function() { btnSubmit = document.getElementById('btnSubmit'); btnSubmit.disabled = #{testBean.btnDisabled}; } </script> </ui:define> <ui:define name="content"> <h:form id="frmTest" prependId="false"> <h:selectBooleanCheckbox id="chkBoolean" onclick="btnSubmit.disabled = !this.checked;" value="#{testBean.chkBoxChecked}"/> <h:commandButton id="btnSubmit" value="Submit"/> </h:form> </ui:define> </ui:composition>

In this case, the disabled attribute should not be set to h:commandButton . Otherwise, client-side changes using js will not affect the JSF tree.

+2
source

It will eventually be converted to HTML.

If you use RichFaces, it will generate a random identifier for the component, so you need to specify an id for the component

Then just play with HTML and JavaScript to achieve what you want.

0
source 
 <h:form id="myForm"> <h:selectBooleanCheckbox id="check" onclick="document.getElementById('myForm:myButton').disable = !this.checked"/> <h:commandButton id="myButton" .../> </h:form>

I'm not sure that "this.checked" will work. If you don’t try:

 onclick="document.getElementById('myForm:myButton').disable = !document.getElementById('myForm:check').checked"

Or a simple jsFunction ...

 <script type="text/javascript"> function checkClick(check) { document.getElementById('myForm:myButton').disable = check.checked; } </script> (...) <h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/> (...)
0
source

More articles:


All Articles