JSF2-Formular mit selectBooleanCheckbox ein-/ausblenden

Question

Ich verwende JSF2 und Java, um eine Webanwendung zu erstellen. Ich möchte auf das Bild unten, um ein Formular wie das bauen:

Wenn jemand das Kontrollkästchen unchecks sollte die Form verschwinden:

Here ein Beispiel mit GWT ist.

---

Bisher versuchte ich ein paar Sachen mit dem <f:ajax>-Tag und ein PropertyActionListener im managedBean aber es hat nicht funktioniert. Kann mir jemand ein Beispiel oder zumindest einige Hinweise geben, um mein Ziel zu erreichen? Ich wäre wirklich dankbar

Answer 1

Verwenden <f:ajax event="click" render="@form"> in der Checkbox und geben Sie die Komponente, die die Formelemente ein rendered Attribut enthält, die auf das Kontrollkästchen der abhängig Zustand. Keine Notwendigkeit für ein weiteres JS-Code-Clutter.

<h:form> 
    <fieldset> 
     <legend> 
      <h:selectBooleanCheckbox binding="#{showUserInfo}"> 
       <f:ajax event="click" render="@form" /> 
      </h:selectBooleanCheckbox> 
      <h:outputText value="User information" /> 
     </legend> 
     <h:panelGroup rendered="#{not empty showUserInfo.value and showUserInfo.value}"> 
      <p> 
       <h:outputLabel for="firstName" value="First name:" /> 
       <h:inputText id="firstName" value="#{bean.user.firstName}" /> 
      </p> 
     </h:panelGroup> 
    </fieldset> 
</h:form> 

Das obige Beispiel das Kontrollkästchen zur Ansicht bindet, können Sie natürlich auch auf eine boolean Bean-Eigenschaft binden, können Sie dann entfernen Sie die not empty Häkchen aus dem rendered Attribut.

  <h:selectBooleanCheckbox value="#{bean.showUserInfo}"> 

... 

     <h:panelGroup rendered="#{bean.showUserInfo}"> 

Answer 2

Sie könnten es durch jQuery oder ein anderes JavaScript tun. Es ist auch möglich, durch <f:ajax>, aber es verbindet sich mit dem Server, den Sie hier nicht benötigen.

Mit jQuery können Sie das Formular einfach ausblenden, das DOM nicht ändern. Soweit ich es verstehe, sollte es genug sein.

Beitrag einige .xhtml wenn Sie mehr wollen :)

Answer 3

Wie amorfis vorgeschlagen, die Idee der Verwendung von hier Ajax ist nicht die beste Lösung, wie Sie einen Anruf auf dem Server für eine clientseitige Manipulation tun .

Die beste Lösung ist, Javascript zu verwenden, um Ihre Komponente (n) zu verbergen. Wenn beispielsweise alle Ihre Etiketten und Eingabetexte in einer <h:panelGrid> Komponente verschachtelt sind, können Sie das tun:

<script type="text/javascript"> 
    function hideOrShow(show) { 
     // Get the panel using its ID 
     var obj = document.getElementById("myForm:myPanel"); 
     if (show) { 
      obj.style.display = "block"; 
     } else { 
      obj.style.display = "none"; 
     } 
    } 
</script> 

<h:form id="myForm"> 
    <h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/> 

    <h:panelGrid id="myPanel" columns="2"> 
     ... 
    </h:panelGrid> 
</h:form>