PrimeFaces 3.0 : '<p:tabView>'으로 탭 포커스를 변경하는 방법

내 앱에서 사용자가 일부 항목을 클릭하면 <p:dialog> 안에 <p:tabView>을 사용하여 해당 항목의 세부 정보를 표시합니다. 항목 유형에 따라 일부 탭이 추가됩니다. 그것은 다음과 유사한 : 나는 저자의 세부 정보를 볼 수 Author 탭에 Book을 클릭하고 탐색 할 때PrimeFaces 3.0 : '<p:tabView>'으로 탭 포커스를 변경하는 방법

<p:dataTable value="#{mrBean.items}" var="item" > 
    <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" update="itemDetails" oncomplete="eventDialog.show();" /> 
    ... 
</p:schedule> 

<p:dialog id="detailsDlg" onHide="detailsTab.select(0);"> 
    <p:tabView effect="fade" widgetVar="detailsTab" id="itemDetails"> 
     <tab title="General details"> 
     ... 
     </tab> 

     <tab rendered="#{mrBean.item.type == 'Book'}" title="Author"> 
     ... 
     </tab> 
    </p:tabView> 
</p:dialog>

상황을 생각해 보자. 이제 General details 탭으로 다시 전환하지 않고 대화 상자를 닫은 후 Book 이외의 항목을 클릭하면 (즉, Author 탭이 없음을 의미) 내 대화 상자가 보이지 않는Author 탭에있는 것으로 보입니다. General tab을 클릭하려고해도 더 이상 렌더링되지 않습니다.

업데이트 :

나는 <p:tabView>과 <p:dialog>의 클라이언트 측 API를 사용 <p:dialog>의 onHide 속성에 detailsTab.select(0)로 전화를 걸하려고 노력했다. 상황은 조금 나아졌습니다. 그러나 Book이 아닌 첫 번째 항목은 Book을 클릭 한 후 클릭하면 위와 같은 상황이 발생합니다. 두 번째 항목부터는 모든 것이 다시 정상입니다. 즉시 작동하도록 할 수있는 방법이 있습니까?

이 문제를 해결할 수있는 방법을 보여 주시면 매우 감사하겠습니다.

출처

2012-01-07 Mr.J4mes

FireFox를 사용하고 계십니까? – Daniel

@ 대니얼 크롬으로 테스트했습니다. 나는 Firefox를 시도하지 않았지만 나중에 할 것이다. –

나는 그것이 FF로 할 일이 있다고 생각했다. 만약 그 것이 너무 크롬이라면 나는 생각하지 않았다. – Daniel

마지막으로 해결책을 찾았습니다. <p:tabView> 태그에서 effect="fade"을 설정하여 일부 효과를 얻으려고했습니다. 나는이 효과가 코드 실행에서 약간의 지연을 초래했을 것으로 생각하여 다음 요청까지 탭 전환의 결과를 볼 수 없었다.

효과를 끄고 내 <p:ajax> 이벤트의 oncomplete 속성에 detailsTab.select(0);을 입력하면 이제 작동합니다. 주의 할

<p:dataTable value="#{mrBean.items}" var="item" > 
    <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" 
      update="itemDetails" oncomplete="eventDialog.show();detailsTab.select(0);" /> 
    ... 
</p:schedule> 

<p:dialog> 
    <p:tabView widgetVar="detailsTab" id="itemDetails"> 
     <tab title="General details"> 
     ... 
     </tab> 

     <tab rendered="#{mrBean.item.type == 'Book'}" title="Author"> 
     ... 
     </tab> 
    </p:tabView> 
</p:dialog>

것은 내 <p:ajax> 이벤트의 oncomplete 속성에 detailsTab.select(0); 퍼팅없이 effect을 해제 할 때이 문제가 계속 발생한다는 것입니다. 즉, 대화 상자가 여전히 보이지 않는 탭을 표시합니다. 그러나 General 탭을 클릭하면이 탭의 내용이 완벽하게 렌더링됩니다. 이 문제는 분명히 effect을 사용할 때만 발생했습니다. 이는 <p:tabView>의 버그 일 수 있습니다.

효과를 꺼야하기 때문에 내 솔루션이 매우 우아하지 않다고 생각합니다. P. effect과 작동 할 수있는 솔루션을 제공 할 수 있다면 답변을 수락하게되어 기쁩니다. :)

출처

2012-01-08 03:22:19

PrimeFaces 3.0 : '<p:tabView>'으로 탭 포커스를 변경하는 방법

답변

관련 문제