How to reference p:commandLink in p:dataTable from p:blockUI trigger?

Question

This is not working for me:

<h:form id="wfMgtForm"> 
    .
    .
    .
    <p:dataTable id="wfTable" ..." var="item">
        <p:column>
        .
        .
        .
        </p:column>
        <p:column>
            <p:commandLink id="editWatchfolderButtonId" oncomplete="dlgEditWF.show()" update=":editWFForm" process="@none">
                <f:param value="#{item.value.ID}" name="editId"/>
                <h:graphicImage alt="Edit Image" style="border: none" value="./images/edit.png" />
            </p:commandLink>
        </p:column>
    .
    .
    .
    <p:blockUI block=":wfMgtForm" trigger="editWatchfolderButtonId">
        Loading...<br/>
        <p:graphicImage alt="Loader Image" value="/images/loader.gif"/>
    </p:blockUI>
</h:form>

The error that I am getting is:

Cannot find component with identifier "editWatchfolderButtonId".

When I used Firebug to look for the ID, I discovered that every row has a different ID:

wfMgtForm:wfTable:0:editWatchfolderButtonId wfMgtForm:wfTable:1:editWatchfolderButtonId wfMgtForm:wfTable:2:editWatchfolderButtonId wfMgtForm:wfTable:3:editWatchfolderButtonId
etc.

How should I reference this auto created IDs from my <p:blockUI>?

Answer 1

The <p:dataTable> is also a NamingContainer. Include its ID as well.

<p:blockUI ... trigger="wfTable:editWatchfolderButtonId">

The row index is only present in client side, not in server side, so that's not relevant.

---

Update: just tested it locally, it indeed fixes the exception, but it didn't trigger the block UI at all (PrimeFaces 3.5). Look like a bug in PrimeFaces.

In the meanwhile, your best bet is to manually trigger it as suggested by Aksel, but then somewhat different:

<p:commandLink ... onclick="bui.show()" oncomplete="bui.hide()">
...
<p:blockUI widgetVar="bui" />

Answer 2

Here is a trivial example of using commandLink to block something. Modified the showcase example from here

<h:form>
    <p:commandButton value="blockMe" id="someId" />
    <br />
    <p:commandLink id="pnlBtn" value="Block" type="button"
        onclick="bui.show()" />
    <br />
    <p:commandLink id="pnlBtn2" value="Unblock" type="button"
        onclick="bui.hide()" />

    <p:blockUI block="someId" widgetVar="bui" />
</h:form>

Answer 3

For those as clueless as myself, if BlockUI is not firing, check that the "trigger" target has Ajax enabled. I spent almost a day trying to figure out why BlockUI did not fire and found that I had its target configured as 'ajax="false"'.

Answer 4

You can use a jquery selector.

<p:commandLink styleClass="mybutton-class">
<p:blockUI ... trigger="@(.mybutton-class)">