关闭 ui:repeat 中所有展开的行

Question

我在一张桌子上有一个 ui:repeat 拍卖物品。它是一个常规的 html 表格，因为当您单击 Bid commandLink 时，会在所选拍卖项目的正下方打开一行，并显示一个投标组件。 Bid commandLink 正在使用这样的 ajax：

<f:ajax listener="#{bean.addBidView(lot)}" render="bidView" />

addBidView 正在更新auctionItems 的地图，这就是打开正确选定行的方式。当用户再次点击相同的 Bid 链接时，addBidView 会计算出来并关闭出价组件。

现在假设用户点击了几行，从而打开了几个出价组件。它们都打开，但只有一个处于活动状态。所以这是我的问题：当我使用上面的 ajax 时，如何让整个循环呈现，以便打开一个投标组件会自动关闭其他打开的组件。 （拍卖品地图反映了正确的出价组件，但是只渲染了这一个出价区域，所以其他的不受影响。如果我刷新整个页面，显示是正确的，只有当我我正在使用 ajax。）

这是页面上元素的结构（所有这些都在 h:form 中:)

<table id="bidstable">
    <h:panelGroup id="entireLoop">
        <ui:repeat id="repeatAuctionItems" var="auctionItem" varStatus="status" value="#{bean.auctionItems}">
            <td>... a bunch of td's with the auction item values ... and then: 
                <h:commandLink id="bid" rendered="#{some conditions}">
                    <f:ajax listener="#{bean.addBidView(auctionItem)}" render="bidView"/>
                </h:commandLink>
            </td>
        </ui:repeat>
    </h:panelGroup>
</table>

我几乎尝试了“渲染”中的所有元素组合——例如：

render="bidView bidsTable"

或 render="bidView bidsTable:entireLoop:repeateAuctionItems"

以及我能想到的所有其他线索。没有任何效果。有任何想法吗？

Answer 1

您在<f:ajax render> 属性中指定了一个客户端ID，它相对 到当前NamingContainer 组件。不以命名容器分隔符开头的客户端 ID（默认为 :）与当前的 NamingContainer 组件相关。 <ui:repeat> 就是这样一个组件。所以客户端 ID 必须引用 <ui:repeat> 的子代。但是您尝试引用的组件实际上在<ui:repeat> 之外。您需要改为使用 绝对 客户端 ID 来引用它。

要找到绝对客户端ID，你需要在浏览器中打开页面，右键单击并执行查看源代码，然后找到最近的父JSF的生成的HTML <ui:repeat> 之外的组件，在您的特定情况下是 <h:panelGroup id="entireLoop">。它看起来像：

<span id="someId:possiblyOtherId:entireLoop">

准确获取此客户端 ID 并在其前面加上 : 以在 <f:ajax render> 中使用。

<f:ajax ... render=":someId:possiblyOtherId:entireLoop" />

如果它包含动态生成的 ID，例如 j_id_123，那么您需要为所有父 NamingContainer 组件（例如 <h:form>）提供固定 ID，例如 <h:form id="someId">。

请注意，不可能引用像<table id="bidsTable"> 这样的纯 HTML 元素的客户端 ID。它必须是一个完整的 JSF 组件，例如 <h:dataTable id="bidsTable">。