ajax - JSF2中div的点击事件

Question

我有一个由 ui:repeat 表示的列表，其中每个项目都是一个包含一些数据的 div。我想要的是通过单击 div 来显示项目详细信息。

我用刷新表单的按钮实现了它，但无法使其与 panelGroup 上的 onclick 事件一起使用。

<h:panelGroup styleClass="container" layout="block">
        <ui:repeat value="#{bean.model}" var="item">

            <h:panelGroup styleClass="item_data" layout="block">
                ID: #{item.id}
                <h:commandButton action="#{bean.select}" value="Select item">
                    <f:param name="itemId" value="#{item.id}"/>
                    <f:ajax render="@form"></f:ajax>
                </h:commandButton>
            </h:panelGroup>

            <h:panelGroup styleClass="detail"
                layout="block" 
                rendered="#{item eq bean.selected}">
                value: #{bean.selected.value}
            </h:panelGroup>

        </ui:repeat>
    </h:panelGroup>

Answer 1

如果我没理解错的话，您只是想显示细节部分而不重新渲染整个表单？如果是这样，那么将它包装在一个始终在 HTML DOM 树中呈现的组件中，给它一个 id并改为引用它:

<ui:repeat value="#{bean.model}" var="item">
    <h:panelGroup styleClass="item_data" layout="block">
        ID: #{item.id}
        <h:commandButton action="#{bean.select}" value="Select item">
            <f:param name="itemId" value="#{item.id}"/>
            <f:ajax render="detail" />
        </h:commandButton>
    </h:panelGroup>

    <h:panelGroup id="detail">
        <h:panelGroup styleClass="detail"
            layout="block" 
            rendered="#{item eq bean.selected}">
            value: #{bean.selected.value}
        </h:panelGroup>
    </h:panelGroup>
</ui:repeat>

另见:

• Communication in JSF 2.0 - Ajax rendering of content which is by itself conditionally rendered

---

更新:根据评论，您实际上想通过 <h:panelGroup onclick> 调用 JSF ajax 操作不，那是不可能的，因为它不支持 onclick属性。你可以使用 <div>与 jsf.ajax.request() 功能，但更清洁的是使用 <h:commandLink>使用 CSS display: block以便它跨越整个 div。

    <h:panelGroup styleClass="item_data" layout="block">
        <h:commandLink action="#{bean.select}" value="ID: #{item.id}" styleclass="detailLink">
            <f:param name="itemId" value="#{item.id}"/>
            <f:ajax render="detail" />
        </h:commandLink>
    </h:panelGroup>

例如

.detailLink {
    display: block;
    color: black;
    text-decoration: none;
}