Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide/Show <p:inputText> using JQuery [closed]

Is there any option to set flag to true and hide <p:inputText id="name" value="#{mybean.value}" /> on change?

JSF code below

<h:form>
      <p:selectOneMenu style="width:150px" id="id" onchange="onCall()">
              <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
              <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
       </p:selectOneMenu>
       <p:selectBooleanCheckbox id="flag"/>
       <p:inputText id="name" value="#{mybean.value}/>
 </h:form>

Please give me an idea to solve my issue

like image 1000
JSF Learner Avatar asked Feb 11 '26 23:02

JSF Learner


1 Answers

You have two ways to achieve this, jQuery or Normal JSF.


JSF


Bean

private Boolean renderInputText;

public void setRenderInputText(Boolean renderInputText) {
    this.renderInputText = renderInputText
}

public Boolean getRenderInputText() {
   return renderInputText;
}

xhtml

<p:selectBooleanCheckbox id="flag" value="{bean.renderInputText}" >.
   <p:ajax update="inputPanel" />
</p:selectBooleanCheckbox>

<h:panelGroup id="inputPanel">
    <p:inputText rendered="{bean.renderInputText}"/>
</h:panelGroup>

jQuery


<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <!-- This can be located either in the facelet or in external js file-->
    <script>
        $(function() {
            PF('selectWV').jq.change(function() {
                if (PF('selectWV').isChecked()) {
                    PF('buttonWV').jq.show();
                } else {
                    PF('buttonWV').jq.hide();
                }
            })
        })
    </script>
</h:head>

<h:body>

    <h:form id="form">
                    Accept Terms: <p:selectBooleanCheckbox
            widgetVar="selectWV" />
        <p:commandButton value="Register" widgetVar="buttonWV"
            style="display: none" />
    </h:form>
</h:body>
</html>

A small working example (jQuery version) can be found on github, two main files terms.xhtml and terms.js

And an online Demo.

Hope this Helps.

like image 87
Hatem Alimam Avatar answered Feb 13 '26 13:02

Hatem Alimam



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!