Помещение ‹span› внутри ‹p:panelGrid› вызывает странное отображение

Я хочу создавать динамические формы с обновлением ajax при событии. Поэтому динамический идентификатор важен. Однако привязка атрибута id к значению bean-компонента вызывает исключение Empty Id. Я видел один из вопросов stackoverflow, который предлагает использовать html. Поэтому я использовал span.

Код xhtml выглядит следующим образом:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui" template="../../templates/ui.xhtml">

    <ui:define name="content">
        <h:form id="testform">
            <ui:repeat value="#{repeat.questions}" var="question">
                <p:panelGrid columns="2">
                    <p:outputLabel value="#{question.label}"/>

                    <span id="#{question.questionCode}">
                        <p:inputText value="#{repeat.values[question.questionCode]}"
                                     rendered="#{question.type == 'TEXT'}">
                            <p:ajax event="blur" update="#{question.dependentQuestionCode}"
                                    disabled="#{empty question.dependentQuestionCode}"/>
                        </p:inputText>

                        <p:password value="#{repeat.values[question.questionCode]}"
                                    rendered="#{question.type == 'SECRET'}">
                        </p:password>

                        <p:inputTextarea value="#{repeat.values[question.questionCode]}"
                                         rendered="#{question.type == 'TEXTAREA'}">
                        </p:inputTextarea>

                        <p:selectOneRadio value="#{repeat.values[question.questionCode]}"
                                          rendered="#{question.type == 'RADIO'}" layout="grid" columns="1">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectOneRadio>

                        <p:selectOneMenu value="#{repeat.values[question.questionCode]}"
                                         rendered="#{question.type == 'SELECTONE'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectOneMenu>

                        <p:selectManyMenu value="#{repeat.values[question.questionCode]}"
                                          rendered="#{question.type == 'SELECTMANY'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectManyMenu>

                        <p:selectBooleanCheckbox
                                value="#{repeat.values[question.questionCode]}"
                                rendered="#{question.type == 'CHECKONE'}"/>

                        <p:selectManyCheckbox value="#{repeat.values[question.questionCode]}"
                                              rendered="#{question.type == 'CHECKMANY'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectManyCheckbox>
                     </span>
                </p:panelGrid>
            </ui:repeat>

            <p:commandButton value="Submit" actionListener="#{repeat.submit}"/>
        </h:form>
    </ui:define>
</ui:composition>

Однако дисплей странный. Он закрывал диапазон на каждой итерации. Почему диапазон закрылся необоснованно до тега закрытия диапазона? введите здесь описание изображения


primefaces jsf-2 panelgrid
person st.    schedule 22.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

<h|p:panelGrid> делит только реальные дочерние компоненты JSF на столбцы, а не простые элементы HTML.

Поместите этот <span> (или лучше, <div>) в качестве непосредственного потомка <ui:repeat>.

<ui:repeat value="#{bean.questions}" var="question">
    <div id="#{question.code}">
        <p:panelGrid>
            ...
        </p:panelGrid>
    </div>
</ui:repeat>
person BalusC    schedule 22.06.2015
comment
Я пытаюсь обновить <div id="#{question.questionCode}" class="#{question.questionCode}"> с помощью update="@(.#{question.dependentQuestionCode})", но мне не удалось обновить зависимый div. Однако, когда я попробовал один из этих update=":testform:#{question.dependentQuestionCode}" или update="@(form)", он мог обновиться. Но не рекомендуется обновлять зависимый div по его точному идентификатору из родительской формы, поскольку я не могу знать идентификатор формы, который он будет использовать. Обновление всей формы опять же очень плохой вариант. Есть ли способ относительно обновить компонент? - person st.; 22.06.2015
comment
<div> не является компонентом JSF. Вместо этого обратитесь к реальному компоненту JSF. Например. что <p:panelGrid>. - person BalusC; 22.06.2015
comment
Ну, на самом деле я пришел сюда из-за необходимости динамического идентификатора для обновления определенного компонента. Выбор класса (styleClass в простых лицах) также решил мою предыдущую проблему с динамическим идентификатором. С другой стороны, это подвело меня к другой проблеме. если я статически набрал update="@(.q5)", он обновится, однако, если я введу update="@(.#{question.dependentQuestionCode})", ajax зависнет на пару секунд и выдаст исключение Error: Syntax error, unrecognized expression: . Извините за много проблем, но я не смог найти способ отладки кода js обновления ajax за кулисами. - person st.; 22.06.2015
comment
Кстати, как вы предложили, я изменил часть <div> (фактически удалил и добавил styleClass в panelGrid): <ui:repeat value="#{repeat.questions}" var="question"> <p:panelGrid columns="2" styleClass="#{question.questionCode}"> <p:outputLabel value="#{question.label}"/> - person st.; 22.06.2015