I am wondering how I could change/replace the type of HTML element that is rendered when I am using an ajax component in jsf?
example:
<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>
for some reason turns into this:
<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>
When viewing the source for the JSF XHTML page, as you can see from the full code above, the ajax tag turns into a span? this is problematic for me because inside this <span> is a <div> and therefore this comes up as a validation error in the W3C Source Validator (e.g.: Div element cannot be a child of Span element)
