1 Reply Latest reply on Apr 2, 2009 7:57 PM by Nick Belaevski

    Tricky reRender

    Fab Mars Novice

      Hi
      I'm on JSF1.2, RF3.3.0, Facelets and Glassfish 2.1;

      I have a facelet caleld customerEdit.xhtml. It contains 2 ui:include with another facelet called addessEdit.xhtml. One is for billing address, the other for a shipping address. This is for an online shop.

      When selecting a country for one of these addresses in a combobox, I'd like to reRender another comboBox which contains states (It shows the 50 states of the USA if you select USA in the countries comboBox).

      Here's a snippet of customerEdit:

      <ui:composition>
       [...]
       <sr:addressEdit id="billingAddress" address="#{customer.billingAddress}" company="#{company}" billing="true" handler="#{customerHandler}" countryListener="#{countryListener}"/>
       [...]
       <sr:addressEdit id="shippingAddress" address="#{customer.shippingAddress}" company="#{company}" billing="false" handler="#{customerHandler}" countryListener="#{countryListener}"/>
       [...]
      </ui:composition>



      And here's a snippet of addressEdit:
      <ui:composition>
       <h:panelGrid id="#{id}" columns="2">
       [...]
       <h:outputLabel value="Country" for="#{id}Country" styleClass="required"/>
       <h:selectOneMenu id="#{id}Country" label="Country" value="#{address.country}" required="true">
       <f:selectItem itemLabel=""/>
       <f:selectItems value="#{commonLister.allCountriesItems}"/>
       <a4j:support event="onchange" ajaxSingle="true" actionListener="#{handler[countryListener]}" reRender="#{id}State"/>
       </h:selectOneMenu>
      
       <h:outputLabel value="State" for="#{id}State" styleClass="required"/>
       <h:selectOneMenu id="#{id}State" label="State" value="#{address.state}" required="#{address.country.states.size > 0}">
       <f:selectItem itemLabel=""/>
       <f:selectItems value="#{handler.stateItems}"/>
       </h:selectOneMenu>
       [...]
      </ui:composition>



      So basically, when a country is changed, it triggers #{handler[countryListener]}, which puprpose is to fill the items #{handler.stateItems}.
      The trick is the #{id} passed, that is used to identify the facelets subcomponents. Therefore, te state in addressEdit is identified by #{id}State.
      So I wrote a reRender="#{id}State" in the action on the countries comboBox, as I'm expecting it to be decoded as reRender="billingAddressState" and reRender="shippingAddressState".
      ...but it probably doesn't because the states comboBox remains unchanged.

      If I change the code and write the ids literally, then my form is functional and the state comboBox is reRendered correctly.
      Hence, I suppose I cannot write things such as reRender="#{id}State".

      Finally, can someone from the team tell me if there is another way of doing what I'm trying to do?