13 Replies Latest reply on Jan 15, 2008 1:18 AM by Tony Herstell

    Confused about a4j:outputPanel and how it's updated

    Tony Herstell Master

      I have an outputText inside a outputPanel (required if you are trying to update an area from an ajax call/event):

      <rich:panel id="selectedResources" style="border:none;">
       <a4j:outputPanel id="resourceAddedTable" layout="none">
       <center>
       <div class="sub3_title">
       <h:outputText value="#{messages.booking_resources}"
       rendered="#{bookingController.hasResources()}" />
       </div>
      


      When I update this area upon button presses:
      <a4j:commandButton id="addEventsManagementSoftwareButton"
       value="#{messages.resource_events_management_software}"
       immediate="true"
       action="#{bookingController.addResource('resource_events_management_software')}"
       reRender="resourceAddButtons, resourceAddedTable, resourceAdditionAttemptMessages"
       onclick="highlightSelectedResources({duration:1.5})" />
      


      All the other parts of the outputPanel are updated but the output text is never displayed.

      Any ideas?

        • 1. Re: Confused about a4j:outputPanel and how it's updated
          Tony Herstell Master

          If I do re-fresh the page it does appear.

          • 2. Re: Confused about a4j:outputPanel and how it's updated
            Tony Herstell Master

            Please disregard..
            #{bookingController.hasResources()} is always false... got to find out why.

            • 3. Re: Confused about a4j:outputPanel and how it's updated
              Tony Herstell Master

              Please re-regard...
              #{bookingController.hasResources()} is not being re-elaborated when the ajax update is being fired to update that event...

              • 4. Re: Confused about a4j:outputPanel and how it's updated
                Tony Herstell Master

                Thi sone does get re-elaborated:

                <rich:dataTable var="eachResource" value="#{bookingResources}" rendered="#{bookingController.hasResources()}">

                Is it because the output text is h: and not rich: ?

                • 5. Re: Confused about a4j:outputPanel and how it's updated
                  Sergey Smirnov Master

                  Even, you "find" the source of the issue, pay attention that:

                  1. a4j:outputPanel with layout="none" should be a direct parent of the component you wrap.
                  2. a4j:outputPanel should not have an id (it is just drop out even defined)
                  3. Wrapped component (h:outputText in your case) should have an id defined explicitly
                  4. reRender should point to the id of the wrapped component (i.e. to the h:outputText in your case)

                  See the example of http://livedemo.exadel.com/richfaces-demo/richfaces/outputPanel.jsf?c=outputPanel

                  • 6. Re: Confused about a4j:outputPanel and how it's updated
                    Tony Herstell Master

                    Thx for reply.

                    This fixed the outputText not appearing... however... introduced another bug...

                    If I move the id to the rich:dataTable (id="resourceAddedTable") then the enclosing commandButton (remove) button does not update resourceAddedTable (which contains itself!).

                    Remove button does not update the Panel (or indeed the title either):

                    <rich:panel id="selectedResources" style="border:none;">
                     <a4j:outputPanel layout="none">
                     <center>
                     <div class="sub3_title">
                     <h:outputText id="resourceAddedTableTitle" value="#{messages.booking_resources}"
                     rendered="#{bookingController.hasResources()}" />
                     </div>
                     <rich:dataTable id="resourceAddedTable" var="eachResource" value="#{bookingResources}"
                     rendered="#{bookingController.hasResources()}">
                     <rich:column>
                     <f:facet name="header">
                     <h:outputText value="#{messages.booking_resource_column_header}" />
                     </f:facet>
                     <h:outputText value="#{messages[eachResource.inlLabel]}" />
                     </rich:column>
                     <rich:column>
                     <f:facet name="header">
                     <h:outputText value="#{messages.booking_action_column_header}" />
                     </f:facet>
                     <a4j:commandButton styleClass="general_form_button"
                     action="#{bookingController.removeResource(eachResource)}"
                     value="#{messages.general_button_remove}" type="submit" immediate="true"
                     reRender="resourceAddButtons, resourceAddedTableTitle, resourceAddedTable">
                     </a4j:commandButton>
                     </rich:column>
                     </rich:dataTable>
                     </center>
                     </a4j:outputPanel>
                    </rich:panel>
                    


                    Remove button does update the Panel:
                    <rich:panel id="selectedResources" style="border:none;">
                     <a4j:outputPanel id="resourceAddedTable" layout="none">
                     <center>
                     <div class="sub3_title">
                     <h:outputText id="resourceAddedTableTitle" value="#{messages.booking_resources}"
                     rendered="#{bookingController.hasResources()}" />
                     </div>
                     <rich:dataTable var="eachResource" value="#{bookingResources}"
                     rendered="#{bookingController.hasResources()}">
                     <rich:column>
                     <f:facet name="header">
                     <h:outputText value="#{messages.booking_resource_column_header}" />
                     </f:facet>
                     <h:outputText value="#{messages[eachResource.inlLabel]}" />
                     </rich:column>
                     <rich:column>
                     <f:facet name="header">
                     <h:outputText value="#{messages.booking_action_column_header}" />
                     </f:facet>
                     <a4j:commandButton styleClass="general_form_button"
                     action="#{bookingController.removeResource(eachResource)}"
                     value="#{messages.general_button_remove}" type="submit" immediate="true"
                     reRender="resourceAddButtons, resourceAddedTableTitle, resourceAddedTable">
                     </a4j:commandButton>
                     </rich:column>
                     </rich:dataTable>
                     </center>
                     </a4j:outputPanel>
                    </rich:panel>
                    


                    • 7. Re: Confused about a4j:outputPanel and how it's updated
                      Sergey Smirnov Master

                      You still did not get the point. Read #1 at least twice.

                      • 8. Re: Confused about a4j:outputPanel and how it's updated
                        Tony Herstell Master

                        > a4j:outputPanel with layout="none" should be a direct parent of the component you wrap.

                        Direct Parent:

                        <rich:panel id="selectedResources" style="border:none;">
                         <center>
                         <div class="sub3_title">
                         <a4j:outputPanel layout="none">
                         <h:outputText id="resourceAddedTableTitle" value="#{messages.booking_resources}"
                         rendered="#{bookingController.hasResources()}" />
                         </a4j:outputPanel>
                         </div>
                         <a4j:outputPanel layout="none">
                         <rich:dataTable id="resourceAddedTable" var="eachResource" value="#{bookingResources}"
                         rendered="#{bookingController.hasResources()}">
                         <rich:column>
                         <f:facet name="header">
                         <h:outputText value="#{messages.booking_resource_column_header}" />
                         </f:facet>
                         <h:outputText value="#{messages[eachResource.inlLabel]}" />
                         </rich:column>
                         <rich:column>
                         <f:facet name="header">
                         <h:outputText value="#{messages.booking_action_column_header}" />
                         </f:facet>
                         <a4j:commandButton styleClass="general_form_button"
                         action="#{bookingController.removeResource(eachResource)}"
                         value="#{messages.general_button_remove}" type="submit" immediate="true"
                         reRender="resourceAddButtons, resourceAddedTableTitle, resourceAddedTable">
                         </a4j:commandButton>
                         </rich:column>
                         </rich:dataTable>
                         </a4j:outputPanel>
                         </center>
                        </rich:panel>
                        


                        Sorry for being a moron but the remove button STILL does not update the resourceAddedTableTitle or resourceAddedTable.

                        • 9. Re: Confused about a4j:outputPanel and how it's updated
                          Tony Herstell Master

                          Id does however re-render the resourceAddButtons.

                          :)

                          • 10. Re: Confused about a4j:outputPanel and how it's updated
                            Tony Herstell Master

                            Ok even more confusing.. remove does work if there are more than 1! it just wont remove the last one. I will investigate.

                            • 11. Re: Confused about a4j:outputPanel and how it's updated
                              Tony Herstell Master

                              This works... :)
                              It shouldn't as it doesn't follow the rules, but it works fine.
                              I posted it in case its useful.

                              
                              <rich:panel id="selectedResources" style="border:none;">
                              <a4j:outputPanel id="resourceAddedTable" layout="none">
                               <center>
                               <div class="sub3_title">
                               <!-- <a4j:outputPanel layout="none"> -->
                               <h:outputText id="resourceAddedTableTitle" value="#{messages.booking_resources} #{bookingController.hasResources()}"
                               rendered="#{bookingController.hasResources()}" />
                               <!-- </a4j:outputPanel> -->
                               </div>
                               <!-- <a4j:outputPanel layout="none"> -->
                               <rich:dataTable var="eachResource" value="#{bookingResources}"
                               rendered="#{bookingController.hasResources()}"> <!--id="resourceAddedTable"-->
                               <rich:column>
                               <f:facet name="header">
                               <h:outputText value="#{messages.booking_resource_column_header}" />
                               </f:facet>
                               <h:outputText value="#{messages[eachResource.inlLabel]}" />
                               </rich:column>
                               <rich:column>
                               <f:facet name="header">
                               <h:outputText value="#{messages.booking_action_column_header}" />
                               </f:facet>
                               <a4j:commandButton styleClass="general_form_button"
                               action="#{bookingController.removeResource(eachResource)}"
                               value="#{messages.general_button_remove}" type="submit" immediate="true"
                               reRender="resourceAddButtons, resourceAddedTableTitle, resourceAddedTable">
                               </a4j:commandButton>
                               </rich:column>
                               </rich:dataTable>
                               <!-- </a4j:outputPanel> -->
                               </center>
                              </a4j:outputPanel>
                              </rich:panel>
                              
                              
                              


                              • 12. Re: Confused about a4j:outputPanel and how it's updated
                                Sergey Smirnov Master

                                What if you remove layout="none" from the <a4j:outputPanel id="resourceAddedTable" layout="none"> ?

                                • 13. Re: Confused about a4j:outputPanel and how it's updated
                                  Tony Herstell Master

                                  From the "one that works but shouldn't" it still works.

                                  Hacking about with the "one it should be" just means nothing gets added:

                                  <rich:panel id="selectedResources" style="border:none;">
                                  <!--<a4j:outputPanel id="resourceAddedTable" layout="none">-->
                                   <center>
                                   <div class="sub3_title">
                                   <a4j:outputPanel>
                                   <h:outputText id="resourceAddedTableTitle" value="#{messages.booking_resources} #{bookingController.hasResources()}"
                                   rendered="#{bookingController.hasResources()}" />
                                   </a4j:outputPanel>
                                   </div>
                                   <a4j:outputPanel>
                                   <rich:dataTable var="eachResource" value="#{bookingResources}"
                                   rendered="#{bookingController.hasResources()}"> <!--id="resourceAddedTable"-->
                                   <rich:column>
                                   <f:facet name="header">
                                   <h:outputText value="#{messages.booking_resource_column_header}" />
                                   </f:facet>
                                   <h:outputText value="#{messages[eachResource.inlLabel]}" />
                                   </rich:column>
                                   <rich:column>
                                   <f:facet name="header">
                                   <h:outputText value="#{messages.booking_action_column_header}" />
                                   </f:facet>
                                   <a4j:commandButton styleClass="general_form_button"
                                   action="#{bookingController.removeResource(eachResource)}"
                                   value="#{messages.general_button_remove}" type="submit" immediate="true"
                                   reRender="resourceAddButtons, resourceAddedTableTitle, resourceAddedTable">
                                   </a4j:commandButton>
                                   </rich:column>
                                   </rich:dataTable>
                                   </a4j:outputPanel>
                                   </center>
                                  <!--</a4j:outputPanel>-->
                                  </rich:panel>