Rerender two control onchanged of RichCalendar

[oneworld95]

Hi. I've got the following c:forEach loop generating dynamic controls inside an a4j:outputPanel. When the user selects a date in the rich:calendar, the h:outputText (with value="OT Hours) needs to have its style changed. No matter what I do, it only changes when the user clicks one of the Submit buttons. What am I doing wrong? Thanks.

<a4j:outputPanel id="output" rendered="#{not empty overtime.overtimeItems}">
 <c:forEach items="#{overtime.overtimeItems}" var="oc">
 <h:outputLabel value="#{oc.dateLabel}"
 style="font-weight:#{(oc.id == 1) ? 'bold' : 'normal'}"
 for="{oc.overtimeDateId}" />
 <rich:calendar value="#{oc.overtimeDate}" requiredMessage="Date 1 is required."
 datePattern="MM-dd-yyyy" required="#{oc.id == 1 ? true : false}">
 <a4j:support event="onchanged" reRender="oc.overtimeHoursId" ajaxSingle="true"/>
 <a4j:support event="oninputchange" reRender="oc.overtimeHoursOutputId" ajaxSingle="true"/>
 </rich:calendar>

 <h:outputText value="OT Hours" id="#{oc.overtimeHoursOutputId}"
 style="padding-left:9px; font-weight:#{oc.overtimeDate == null || oc.overtimeDate.toString() == '' ? 'normal' : 'bold'}"/>
 <h:inputText value="#{oc.overtimeHours}" id="#{oc.overtimeHoursId}"
 converterMessage="OT Hours for Date #{oc.id} must be digits only." converter="javax.faces.Integer"
 requiredMessage="OT Hours is required if Date #{oc.id} has a value." maxlength="5" style="width:50px;"
 required="#{oc.overtimeDate == null || oc.overtimeDate.toString() == '' ? false : true}" >
 </h:inputText>
 <h:commandButton onclick="removeOvertime('#{oc.randomId}'); Event.stop(event);" value="Remove"
 rendered="#{oc.id == 1 ? false : true}" style="margin-left:9px" />
 <br />
 </c:forEach>
</a4j:outputPanel>

<a4j:jsFunction action="#{overtime.removeOvertimeComponent()}" name="removeOvertime"
 ajaxSingle="true" reRender="output">
 <a4j:actionparam name="current"/>
</a4j:jsFunction>

<a4j:commandButton action="/new-employee/new_employee.xhtml"
 type="submit" value="Submit"
 reRender="status" eventsQueue="foo" status="status"
 onclick="this.disabled=true" id="btnSubmit"
 oncomplete="#{facesContext.maximumSeverity == null ? 'Richfaces.hideModalPanel(\'mpErrors\');' : 'Richfaces.showModalPanel(\'mpErrors\'); this.disabled=false'}"
 />  
 <input id="btnReset" value="Reset" type="reset" />  
<a4j:commandButton action="#{overtime.addOvertimeComponent()}"
 reRender="output" ajaxSingle="true" value="Add Another Date Row" /><br />

[oneworld95]

One other issue: The h:inputText fields don't hold their values between AJAX calls. When I click the a4j:commandButton at the bottom to "Add Another Date Row", the value in the h:inputText fields are cleared out.

[oneworld95]

Found out what I was doing wrong: The IDs of the components that needed to be updated weren't set. Here's the working code:

<a4j:outputPanel id="output" rendered="#{not empty overtime.overtimeItems}">
 <c:forEach items="#{overtime.overtimeItems}" var="oc">
 <h:outputLabel value="#{oc.dateLabel}"
 style="font-weight:#{(oc.id == 1) ? 'bold' : 'normal'}"
 for="#{oc.overtimeDateId}" />
 <rich:calendar value="#{oc.overtimeDate}" requiredMessage="Date 1 is required."
 id="#{oc.overtimeDateId}"
 datePattern="MM-dd-yyyy" required="#{oc.id == 1 ? true : false}">
 <a4j:support event="onchanged" reRender="#{oc.overtimeHoursId}, #{oc.overtimeHoursOutputId}" ajaxSingle="true"/>
 </rich:calendar>

 <h:outputText value="OT Hours" id="#{oc.overtimeHoursOutputId}"
 style="padding-left:9px; font-weight:#{oc.overtimeDate == null || oc.overtimeDate.toString() == '' ? 'normal' : 'bold'}"/>
 <h:inputText value="#{oc.overtimeHours}" id="#{oc.overtimeHoursId}"
 converterMessage="OT Hours for Date #{oc.id} must be numeric and in this format: 99.9"
 validatorMessage="OT Hours for Date #{oc.id} must be numeric and in this format: 99.9"
 requiredMessage="OT Hours is required if Date #{oc.id} has a value." maxlength="4" style="width:50px;"
 required="#{oc.overtimeDate == null || oc.overtimeDate.toString() == '' ? false : true}" >
 <f:convertNumber maxFractionDigits="1" maxIntegerDigits="2" type="number"/>
 </h:inputText>
 <h:commandButton onclick="removeOvertime('#{oc.randomId}'); Event.stop(event);" value="Remove"
 rendered="#{oc.id == 1 ? false : true}" style="margin-left:9px" />
 <br />
 </c:forEach>
</a4j:outputPanel>

<a4j:jsFunction action="#{overtime.removeOvertimeComponent()}" name="removeOvertime"
 ajaxSingle="true" reRender="output">
 <a4j:actionparam name="current"/>
</a4j:jsFunction>

<label for="kluge" class="buttons" />
<rich:messages styleClass="errors" layout="table" style="margin-top: 20px;" >
 <f:facet name="header">
 <h:outputText value="Please address the following issues:"></h:outputText>
 </f:facet>
</rich:messages>
<br />

<label for="kluge" class="buttons" />
<a4j:commandButton action="/new-employee/new_employee.xhtml"
 type="submit" value="Submit"
 reRender="status" eventsQueue="foo" status="status"
 onclick="this.disabled=true" id="btnSubmit"
 oncomplete="#{facesContext.maximumSeverity == null ? 'Richfaces.hideModalPanel(\'mpErrors\');' : 'Richfaces.showModalPanel(\'mpErrors\'); this.disabled=false'}"
 />  
 <input id="btnReset" value="Reset" type="reset" />  
<a4j:commandButton action="#{overtime.addOvertimeComponent()}"
 reRender="output" type="submit" ajaxSingle="true" value="Add Another Date Row" /><br />

<label for="kluge" class="buttons" />
 <a4j:status id="status" startText="Processing request. Please wait..."
 stopText="#{utilities.status}" startStyleClass="startStyle"
 stopStyleClass="stopStyle" /><br />