如何从 p:blockUI 触发器引用 p:dataTable 中的 p:commandLink？答案

【问题标题】：How to reference p:commandLink in p:dataTable from p:blockUI trigger?如何从 p:blockUI 触发器引用 p:dataTable 中的 p:commandLink？
【发布时间】：2013-01-31 08:55:38
【问题描述】：

这对我不起作用：

<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>

我得到的错误是：

Cannot find component with identifier "editWatchfolderButtonId"。

当我使用 Firebug 查找 ID 时，我发现每一行都有不同的 ID：

wfMgtForm:wfTable:0:editWatchfolderButtonId wfMgtForm:wfTable:1:editWatchfolderButtonId wfMgtForm:wfTable:2:editWatchfolderButtonId wfMgtForm:wfTable:3:editWatchfolderButtonId
等等

我应该如何从我的<p:blockUI> 引用这个自动创建的 ID？

【问题讨论】：

标签： jsf jsf-2 primefaces blockui

【解决方案1】：

您可以使用 jquery 选择器。

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

【讨论】：

【解决方案2】：

对于像我这样一无所知的人，如果 BlockUI 没有触发，请检查“触发器”目标是否启用了 Ajax。我花了将近一天的时间试图弄清楚为什么 BlockUI 没有触发，并发现我将其目标配置为 'ajax="false"'。

【讨论】：

【解决方案3】：

<p:dataTable> 也是NamingContainer。包括它的 ID。

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

行索引只存在于客户端，不存在于服务器端，因此不相关。

更新：刚刚在本地测试，确实修复了异常，但根本没有触发块UI（PrimeFaces 3.5）。看起来像 PrimeFaces 中的错误。

与此同时，最好的办法是按照 Aksel 的建议手动触发它，但随后会有所不同：

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

【讨论】：

对我来说，在 v 3.4.1 中也没有例外，但我仍然没有阻止 UI。
这完全降低了我的 UI 的用户体验。是否有任何可能为 PrimeFaces 提供补丁？修复起来有多难？
同样的问题，PF6

【解决方案4】：

这是一个使用 commandLink 阻止某些东西的简单示例。修改了来自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>

【讨论】：

猜“别人”更快，但我保留了 BalusC 引用的答案。 :) 对于将来看到这个的人来说，值得注意的是这个答案比编辑后更适合原始问题。