rerendering rich:calendar is not working for the first time but working on page refresh

Question

I have a search criteria to fetch details from the database between the two different dates.

I have a h:slectOneMenu populated with the list {"from","to","between"}. For "from" and "to" dates i have to display a rich:calendar to give date input and for "between" i have to display two rich:calendar to give input start date and end date.

My code is like this

<h:selectOneMenu id="startdate" 
       value="#{commoncontroller.coverDateType}">  
      <a4j:support event="onchange" ajaxSingle="true"     
                   action="#controller.dateSelectionChanged}" 
                   reRender="startdateone,startdatetwo"/>
          <f:selectItems value="#{controller.startDateMap}" />
    </h:selectOneMenu>

     <h:panelGrid id="startdateone" layout="block" rendered="#{controller.dateOneStatus}">
            <rich:calendar id="date1"                               value="#{controller.covStartDate}" showWeeksBar="false" />
     </h:panelGrid>

     <h:panelGrid id="startdatetwo" layout="block" rendered="#{controller.dateTwoStatus}">
            <rich:calendar id="date2"                               value="#{controller.covStartDate2}" showWeeksBar="false" />
     </h:panelGrid>

If i select any value from select menu the calendars are not rendered for the first time even though the panelGrid rendered attribute is set to true in the backend but if i refresh the page then they are rendered.

Any help is much appreciated.

Answer 1

There is an issue regarding reRendering components with rendered attribute directly, when i say directly means what did you just do in your code. Try Wrapping your two panel grid with a parent component like a4j:outputPanel and reRender that a4j:outputPanel using its id.

Like this:

<h:selectOneMenu id="startdate" 
       value="#{commoncontroller.coverDateType}">  
      <a4j:support event="onchange" ajaxSingle="true"     
                   action="#controller.dateSelectionChanged}" 
                   reRender="box"/>
          <f:selectItems value="#{controller.startDateMap}" />
    </h:selectOneMenu>

<a4j:outputPanel id="box">
     <h:panelGrid id="startdateone" layout="block" rendered="#{controller.dateOneStatus}">
            <rich:calendar id="date1"                               value="#{controller.covStartDate}" showWeeksBar="false" />
     </h:panelGrid>

     <h:panelGrid id="startdatetwo" layout="block" rendered="#{controller.dateTwoStatus}">
            <rich:calendar id="date2"                               value="#{controller.covStartDate2}" showWeeksBar="false" />
     </h:panelGrid>

</a4j:outputPanel>

Hope this helps. -cheers