CODEWITHSUNDEEP
jsfjsf-2primefaces
Akhil
Akhil

Reputation: 561

Primefaces BlockUI is not working

I am updating my datatable when a user clicks the menu. So I want to show some loading image while ajax fetches the data and updates my datatable. I am using p:blockUI for this purpose. My menu is : 

<h:form id="leftMenu">    
    <p:menu id="privilegeItem">        
        <p:menuitem id="objectItem" 
                    actionListener="#{selectSignMethodView.changeSignMethods('object')}" 
                    value="Object Signing Services" 
                    update=":signMethodForm:signMethodTable"/>
        <p:menuitem id="mobileItem" 
                    actionListener="#{selectSignMethodView.changeSignMethods('mobile')}" 
                    value="Mobile Signing Services" 
                    update=":signMethodForm:signMethodTable"/>
        <p:menuitem id="macItem" 
                    actionListener="#{selectSignMethodView.changeSignMethods('mac')}" 
                    value="Mac Signing Services" 
                    update=":signMethodForm:signMethodTable"/>     
        <p:menuitem id="solarisItem" 
                    actionListener="#{selectSignMethodView.changeSignMethods('solaris')}" 
                    value="solaris Signing Services" 
                    update=":signMethodForm:signMethodTable"/>  
    </p:menu>
</h:form>

And my datatable is like this : 

<h:form prependId="false" id="signMethodForm"> 
    <p:dataTable id="signMethodTable" 
                 value="#{selectSignMethodView.signMethodList}" 
                 var="signMethods">
        <p:column>
            <h:outputText value="${signMethods.name}"/>
        </p:column>
        <p:column>
            <h:outputText value="#{signMethods.fileTypes}" />
        </p:column>
        <p:column>
            <h:outputText value="#{signMethods.servers}"/>
        </p:column>
    </p:dataTable>
    <p:blockUI trigger=":leftMenu:privilegeItem" block="signMethodTable">
        LOADING<br />
        <p:graphicImage library="images" name="ajax-loader.gif"/>
    </p:blockUI>
</h:form>

But blockUI is not blocking my datatable . Is something wrong with my trigger attribute.

Upvotes: 3

Views: 4638

Answers (1)

wittakarn
wittakarn

Reputation: 3164

In the case of Primefaces 5.0, Try to use 

<p:menuitem id="objectItem" 
            actionListener="#{selectSignMethodView.changeSignMethods('object')}" 
            value="Object Signing Services" 
            update=":signMethodForm:signMethodTable" 
            onclick="PF('block').show()" 
            oncomplete="PF('block').hide()"/>

, and also add widgetVar to

<p:blockUI block="signMethodTable" widgetVar="block">
            LOADING<br />
            <p:graphicImage library="images" name="ajax-loader.gif"/>
</p:blockUI>

it works for me.

Upvotes: 6

Related Questions