Нажмите событие на div в JSF2

Question

У меня есть список, представленный пользовательским интерфейсом: repeat, где каждый элемент - это div с некоторыми данными. Я хочу показать детали товара, нажав на div.

Я сделал это с помощью кнопки, обновляющей форму, но не могу заставить ее работать с событием onclick в PanelGroup.

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

Смотри также:

• Связь в JSF 2.0 - Ajax-рендеринг контента, который сам по себе условно отображается

---

Обновление : согласно комментариям, вы действительно хотите вызвать действие JSF ajax с помощью <h:panelGroup onclick> нет, это невозможно, так как он не поддерживает атрибут 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;
}