체크 박스를 클릭하면 패널 그룹 숨기기 방법

Question

outputText 및 href 링크가있는 패널 그룹이 있습니다. 나는이 panelgroup이 체크 박스의 값이 pageload에 (사실) 확인 될 때 ​​

1. panelgroup 렌더링한다 아래의 방법으로 체크 박스 값을 기준으로 렌더링 할.
2. 기본적으로 체크 박스 값을 선택하지 않으면 (페이지로드시) 패널 그룹이 표시되지 않아야하지만 사용자가 체크 박스를 클릭하면 패널 그룹이 표시되어야합니다.

문제 : 체크 박스가 체크 박스에 기본 및 사용자 클릭에 의해 확인되지 않는 경우 panelgroup가 표시되지 않습니다. 나는/표시가 pageload에서 렌더링되지 않았기 때문에, 따라서 온 클릭은 숨길 수있는 범위를 찾을 수 없습니다 생각 여기

는 panelgroup 코드 :

<h:panelGroup 
            styleClass="showMsg#{valNumber}" 
            rendered="#{dataItem.checkboxVal}"> 

            <h:outputText 
             styleClass="showMsg#{valNumber}" 
             style="margin-top: 18px; text-align: center;" 
             value="Text Line1" escape="false" 
             rendered="#{dataItem.checkboxVal}" /> 
            <f:verbatim> 
             <br /> 
            </f:verbatim> 
            <h:outputText 
             styleClass="showMsg#{valNumber}" 
             style="text-align: center;" value="Text Line 2" 
             escape="false" 
             rendered="#{dataItem.checkboxVal}" /> 
            <f:verbatim> 
             <br /> 
             <wps:urlGeneration 
              <a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a> 
             </wps:urlGeneration> 
            </f:verbatim> 
           </h:panelGroup> 

내가 체크 박스를 클릭하면, 다음 panelgroup가 아닌 표시됩니다. 여기 내 클릭 자바 스크립트 함수입니다.

<h:selectBooleanCheckbox id="xyz" styleClass='mycheckbox#{valNumber}' 
onclick="showShippingMsg(this,'#{valNumber}'); " 



    function showShippingMsg(checkbox, valNum){ 

     if(checkbox.checked){ 
      $(".showMsg"+valNum).css("display", "block"); 
     } else { 
     $(".showMsg"+valNum).css("display", "none"); 
     } 
    } 

Answer 1

글쎄, 항상 JSF ajax 기능을 사용할 수 있습니다. 허위 또는 (당신이 그것을 클릭 할 때) true로 false로 진정한 체크 박스 값 변경, 아약스는 여러분의 빈에 checkboxValue에 대한 setter 메소드를 해고하고 다시 시작됩니다 때, 이제

<h:panelGroupid="panel"> 
    <h:panelGroup rendered="#{bean.checkboxValue}"> 
     <!-- your content here --> 
    </h:panelGroup> 
</h:panelGroup> 

<h:selectBooleanCheckbox value="#{bean.checkboxValue}"> 
    <f:ajax event="change" render="panel"/> 
</h:selectBooleanCheckbox> 

: 여기 샘플 코드 렌더링 속성 (이 경우 id="panel")에 id를 설정하여 JSF 구성 요소를 렌더링하면 checkboxValue가 true 인 경우 렌더링되어야합니다. 따라서 checkboxValue가 true이면 렌더링 된 h:panelGroup 속성도 true이고 반대의 경우도 마찬가지입니다.

public boolean checkboxValue; 

public void setCheckboxValue(boolean checkboxValue) { 
    this.checkboxValue = checkboxValue; 
} 

public boolean getCheckboxValue() { 
    return this.checkboxValue; 
} 

말이 :

그리고 당신의 콩 checkboxValue에서

는 다음과 같이 설정해야합니다?

편집

참고, 그 h:selectBooleanCheckbox 구성 요소는 콩에 checkboxValue을 POST하기 위해 h:form 안에 중첩되어야한다.

편집 2

아약스를 사용하는 경우, 당신은 전체 데이터 테이블 (정말 데이터의 DataTable에 저장 많은 경우 좋은 생각)을 다시 렌더링을 시도해야합니다. 그게 효과가 없으면 패널 그룹의 styleClass를 styleClass="your_panel_style_class#{valNumber} #{not dataItem.checkboxVal ? 'style_class_to_hide_panel' : ''}"과 같이 설정하면 checkboxVal을 기반으로 기본 styleClass가 설정됩니다. 그런 다음 패널에 rendered 속성을 제거하십시오.

.style_class_to_hide_panel { 
    display: none; 
} 

그런 다음 당신은 당신의 체크 박스 onlcick 속성에 넣고 시도 할 수

function togglePanel(valNumber) { 
    var panel = $('.your_panel_style_class' + valNumber); 

    if (panel === undefined) { 
     // find your panel and select it 
    } 

    panel.toggleClass('style_class_to_hide_panel'); 
} 

신뢰할 수있는 jQuery를 스크립트가 당신을 위해 얼마나 확실하지.