CODEWITHSUNDEEP
jsfjsf-2primefaces
user1285928
user1285928

Reputation: 1476

How to use p:blockUI with p:tabView

I want to create tabs with progress bar. Something like this:

<p:tabView id="tabs" dynamic="true" cache="false">
    <p:tab id="tab1" title="tab1" >
        <ui:include src="tab1.xhtml" />
    </p:tab>
    <p:tab id="tab2" title="tab2" >
        <ui:include src="tab2.xhtml" />
    </p:tab>

    <p:blockUI block="tabs" trigger="tabs">  
        LOADING
    </p:blockUI>  
</p:tabView>

But it's not working. Can you help me to correct my mistake?

Upvotes: 2

Views: 2152

Answers (2)

user2526920
user2526920

Reputation:

Following code works for me (Primefaces 5.2)

<p:blockUI block="tabs" widgetVar="tabsBlocker">  
    LOADING
</p:blockUI>  

<p:tabView id="tabs" dynamic="true" cache="false" 
    onTabChange="PF('tabsBlocker').show()" 
    onTabShow="PF('tabsBlocker').hide()">

  <p:tab id="tab1" title="tab1" >
      <ui:include src="tab1.xhtml" />
  </p:tab>

  <p:tab id="tab2" title="tab2" >
      <ui:include src="tab2.xhtml" />
  </p:tab>

</p:tabView>

Upvotes: 0

Kerem Baydoğan
Kerem Baydoğan

Reputation: 10720

Try this: 

<p:tabView id="tabs">

  <p:ajax event="tabChange" onstart="BUI.show()" oncomplete="BUI.hide()" />

  <p:tab id="tab1" title="tab1">
    <h:outputtext value="TAB 1" />
  </p:tab>

  <p:tab id="tab2" title="tab2">
    <h:outputtext value="TAB 2" />
  </p:tab>

</p:tabView>

<p:blockUI widgetVar="BUI" block="tabs">
  LOADING
</p:blockUI>

Upvotes: 3

Related Questions