2 Replies Latest reply on Jul 30, 2009 3:37 PM by Alex Cougarman

    Rerender two control onchanged of RichCalendar

    Alex Cougarman Apprentice

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


        • 1. Re: Rerender two control onchanged of RichCalendar
          Alex Cougarman Apprentice

          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.

          • 2. Re: Rerender two control onchanged of RichCalendar
            Alex Cougarman Apprentice

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