My setup includes a p:selectOneRadio constructed like this:
<p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom"
required="true" requiredMessage="Please select a position">
<f:selectItems value="#{employeeBean.positionList}" var="pos"
itemLabel="#{pos.name}" itemValue="#{pos}" />
<p:ajax process="@this" update="@this"/>
</p:selectOneRadio>
<ui:repeat id="iterator" value="#{employeeBean.positionList}" var="template" varStatus="iterStat">
<div class="form-group" onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();">
<h:outputText styleClass="form-control" value="#{pos.name}"/>
<p:radioButton for=":employeeForm:positionRadio" itemIndex="#{iterStat.index}" />
<div style="display: inline">
<p style="display: inline">
<h:outputText value="#{pos.description}"/>
</p>
</div>
</div>
</ui:repeat>
I am trying to ensure that clicking on any part of the div containing a radio button selects it. This behavior is achieved using this line of code:
onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();"
While this works partially by triggering a POST request upon clicking, the client-side styles are not updated to reflect the radio button selection. This issue arises because the p:radioButton element is rendered with a hidden input radio and a visible span styled dynamically. The question is why does the span style not update when clicked through JavaScript and is there a way to resolve this?
My technologies include JSF 2.1.7, PrimeFaces 5.0, and Java 1.7