将<span>放在<p：panelgrid>中导致＆＃34;怪异的＆＃34;显示

Question

我想在事件上使用ajax update创建动态表单。因此dynamic-id很重要。但是，将id属性绑定到bean值会导致Empty Id异常。我看到了一个建议使用html的stackoverflow问题。所以我用了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>

然而，显示器很奇怪。它在每次迭代中关闭了跨度。为什么在跨度关闭标记之前跨度不合理地关闭？

Answer 1

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