2011-05-15 6 views
0

나는 탭이있는 JSF 2.0 웹 응용 프로그램을 가지고 있습니다. 구성 요소를 숨긴 다음 표시합니다. 값은 저장되지 않습니다.

조건부 styleClass`ING 통해 display:none/block와 조건 render="#{x==y}" 또는 함께 하나 (내가 하나 보여 탭을 전환하고 다른 사람을 숨 깁니다.

을 내가 탭이 표시하거나 제대로 숨길 수 어느 경우.

입력 상자에 입력 된 값이 유지되지 않는 문제는 탭 숨기기/표시를 던지는 것입니다. 즉, 탭 1에 일부 값을 입력하고 탭 2로 이동하여 탭 1로 돌아 가면 값은 보존되지 않음).

<f:ajax> 태그를 사용합니다. 탭 선택 (해시 변경 이벤트에 의해 점화 됨)

<h:form id="processFragment" prependId="false" class="hide"> 
    <h:inputText id="fragment" value="#{fbean.fragment}"> 
     <f:ajax event="change" execute="contentSection" listener="#{fbean.processFragment}" 
      render="contentSection" /> 
    </h:inputText> 
</h:form> 
<div> 
    <h:form id="contentSection"> 
     <ui:insert name="content" /> 
    </h:form> 
</div> 

고마워요!

코드 디스플레이 탭 표시 줄과 탭 내용 :

<ui:define name="content"> 
    <f:view> 
     <h:panelGroup styleClass="navBar"> 
      <ul> 
       <ui:repeat value="#{hello.tabList}" var="tab"> 
        <li onclick="window.location='\##{tab.tabHash}'"><h:panelGroup 
          styleClass="#{hello.chose == tab.tabHash?'activeTab':''}"> 
          <h:outputText value="#{tab.tabName}" /> 
         </h:panelGroup> 
        </li> 
       </ui:repeat> 
      </ul> 
     </h:panelGroup> 
     <h:panelGroup id="contentPanels" styleClass="tabContentBar"> 
      <c:forEach items="#{hello.tabList}" var="tab"> 
       <h:panelGroup rendered="#{hello.chose == tab.tabHash}"> 
        <!-- <h:panelGroup styleClass="#{hello.chose == tab.tabHash?'shownTabContents':'hiddenTabContents'}"> --> 
        <ui:include src="#{tab.tabFile}" /> 
       </h:panelGroup> 
      </c:forEach> 
     </h:panelGroup> 
    </f:view> 
</ui:define> 

마지막으로, 특정 탭의 내용 :

<h:outputText value="TESTING 1" /> 
<h:panelGroup styleClass="formField"> 
    <h:outputText value="Enter Value:" /> 
    <h:inputText value="#{general.name}" /> 
</h:panelGroup> 

UPDATE 그냥 발견하는 경우에도 I 돈 탭을 숨기고 버튼을 누르면 값이 재설정됩니다. 조사 중 ...

+0

숨기기/표시 이벤트로 xhtml의 탭 부분을 표시 할 수 있습니까? –

+0

@Dave - 코드가 추가되었습니다. Tnx. – Ben

답변

1

값은 뷰 범위 Bean을 사용하고 탭 탐색 중 (또는 바로 전에) 원하는 양식이 서버 측에 제출 된 경우에만 유지됩니다.

다른 방법으로 모든 탭을 한 번에 렌더링하고 JS/CSS 만 사용하여 탭 내용을 표시하거나 숨길 수 있습니다. CSS 숨겨진 입력은 여전히 ​​서버 측에 제출됩니다.

+0

Tnx. CSS에서 Hiding은 클래스에'display : none'을 할당하는 것을 의미합니까? – Ben

+0

예. 그런 다음 JS 만 토글합니다. – BalusC

+0

은 주석 처리 된 행입니다. 'JS가 아닌 경우에만? (작동하지 않기 때문에) – Ben

관련 문제