首页 > 解决方案 > 如何更改 f:ajax 的 HTML 元素

问题描述

我想知道如何更改/替换在 jsf 中使用 ajax 组件时呈现的 HTML 元素的类型?

例子:

                <f:ajax render="regionGroup" >
                    <div class="form-group">
                        <ui:fragment rendered="#{registerAction.cndOption.isTrue()}">
                            <h:outputLabel for="cndCivicCountryId" class="col-sm-4 control-label">#{messages['pi.label.country']}</h:outputLabel>
                            <div class="col-sm-8 ">
                                <h:message for="cndCivicCountryId" class="label label-danger" />
                                <h:selectOneMenu class="form-control" id="cndCivicCountryId" value="#{registerAction.orgProfile.civicAddress.country}" required="true" disabled="true">
                                    <f:selectItems value="#{pacUtils.getSortedList(referenceUtils.getCountryList(),localeSelector.locale)}" var="civicCountryCnd"
                                        itemLabel="#{civicCountryCnd.getDisplayName(localeSelector.locale)}" itemValue="#{civicCountryCnd}" />
                                </h:selectOneMenu>
                            </div>
                        </ui:fragment>
                        <ui:fragment rendered="#{!registerAction.cndOption.isTrue()}">
                            <h:outputLabel for="intlCivicCountryId" class="col-sm-4 control-label">#{messages['pi.label.country']}</h:outputLabel>
                            <div class="col-sm-8 ">
                                <h:message for="intlCivicCountryId" class="label label-danger" />
                                <h:selectOneMenu class="form-control" id="intlCivicCountryId" value="#{registerAction.orgProfile.civicAddress.country}" required="true"
                                    requiredMessage="#{messages['pi.msg.validation.registration.missingCountry']}" converter="selectItemToEntityConverter">
                                    <f:selectItem itemValue="#{null}" itemLabel="#{messages['pi.label.selectOne']}" noSelectionOption="true" />
                                    <f:selectItems value="#{referenceUtils.getSortedIntlCountryList()}" var="civicCountry"
                                        itemLabel="#{civicCountry.getDisplayName(localeSelector.locale)}" itemValue="#{civicCountry}">
                                    </f:selectItems>
                                </h:selectOneMenu>
                            </div>
                        </ui:fragment>
                    </div>
                </f:ajax>
                <h:panelGroup id="regionGroup">
                    <div class="form-group">
                        <h:outputLabel for="civicRegionId" class="col-sm-4 control-label">#{messages['pi.label.region']}</h:outputLabel>
                        <div class="col-sm-8">
                            <h:message for="civicRegionId" class="label label-danger" />
                            <h:selectOneMenu class="form-control" id="civicRegionId" value="#{registerAction.orgProfile.civicAddress.region}" required="true"
                                requiredMessage="#{messages['pi.msg.validation.registration.missingRegion']}" converter="selectItemToEntityConverter"
                                disabled="#{registerAction.orgProfile!=null and registerAction.orgProfile.civicAddress.country==null}">
                                <f:selectItem itemValue="#{null}" itemLabel="#{messages['pi.label.selectOne']}" noSelectionOption="true" />
                                <f:selectItems value="#{registerAction.getSortedRegionsByCountry(registerAction.orgProfile.civicAddress.country)}" var="civicRegion" itemLabel="#{civicRegion.getDisplayName(localeSelector.locale)}"
                                    itemValue="#{civicRegion}" />
                            </h:selectOneMenu>
                        </div>
                    </div>
                </h:panelGroup>

由于某种原因变成了这样:

 <span id="j_idt55:regionGroup">
                    <div class="form-group"><label for="j_idt55:civicRegionId" class="col-sm-4 control-label">Region, Province or State</label>
                        <div class="col-sm-8"><select id="j_idt55:civicRegionId" name="j_idt55:civicRegionId" class="form-control" size="1">    <option value="" selected="selected">Select One</option>
        <option value="1">Alberta</option>
        <option value="487">British Columbia</option>
        <option value="3">Manitoba</option>
        <option value="4">New Brunswick</option>
        <option value="5">Newfoundland and Labrador</option>
        <option value="7">Northwest Territories</option>
        <option value="6">Nova Scotia</option>
        <option value="8">Nunavut</option>
        <option value="9">Ontario</option>
        <option value="10">Prince Edward Island</option>
        <option value="11">Quebec</option>
        <option value="12">Saskatchewan</option>
        <option value="13">Yukon</option>
      </select>
                        </div>
                    </div></span>

在查看 JSF XHTML 页面的源代码时,从上面的完整代码可以看出,ajax 标签变成了 span?这对我来说是有问题的,因为这里面<span>是 a <div>,因此这在 W3C 源验证器中作为验证错误出现(例如:Div 元素不能是 Span 元素的子元素)

标签: htmlajaxjsfxhtml

解决方案


推荐阅读