Hiển thị/ẩn biểu mẫu JSF2 bằng selectBooleanCheckbox

Question

Tôi đang sử dụng JSF2 và Java để xây dựng một ứng dụng web. Tôi muốn xây dựng một hình thức giống như một ở hình dưới đây:

Khi ai đó unchecks hộp kiểm dưới hình thức nên biến mất:

Here là một ví dụ với gwt.

---

Cho đến nay, tôi đã cố gắng một số nội dung với thẻ <f:ajax> và một PropertyActionListener trong managedBean nhưng nó đã không làm việc. Ai đó có thể cho tôi một ví dụ hay ít nhất một số gợi ý để hoàn thành mục tiêu của tôi. Tôi sẽ thực sự biết ơn

Answer 1

Sử dụng <f:ajax event="click" render="@form"> trong hộp kiểm và cung cấp cho các thành phần có chứa các yếu tố hình thành một thuộc tính rendered mà phụ thuộc vào các hộp kiểm của tiểu bang. Không cần một mã JS khác lộn xộn.

<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> 

Ví dụ trên liên kết với hộp kiểm để xem, bạn có thể dĩ nhiên cũng ràng buộc nó vào một tài sản boolean đậu, sau đó bạn có thể loại bỏ việc kiểm tra not empty từ thuộc tính rendered.

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

... 

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

Answer 2

Bạn có thể làm điều đó bằng jQuery hoặc một JavaScript khác. Nó cũng có thể bởi <f:ajax>, nhưng nó kết nối với máy chủ mà bạn không cần ở đây.

Bằng jQuery bạn chỉ có thể ẩn biểu mẫu chứ không phải thay đổi DOM. Theo như tôi hiểu, nó là đủ.

bài viết một số .xhtml nếu bạn muốn biết thêm :)

Answer 3

Theo đề nghị của amorfis, ý tưởng của việc sử dụng Ajax ở đây không phải là giải pháp tốt nhất, vì bạn sẽ làm một cuộc gọi đến máy chủ của bạn cho một thao tác client-side .

Giải pháp tốt nhất là sử dụng Javascript để ẩn (các) thành phần của bạn. Ví dụ, nếu tất cả các nhãn của bạn và các văn bản đầu vào được lồng trong một thành phần <h:panelGrid>, bạn có thể làm điều đó:

<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>