Confused about a4j:outputPanel and how it's updated

[tony.herstell1]

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?

[tony.herstell1]

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

[tony.herstell1]

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

[tony.herstell1]

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

[tony.herstell1]

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: ?

[sergeysmirnov]

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

[tony.herstell1]

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>

[sergeysmirnov]

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

[tony.herstell1]

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

[tony.herstell1]

Id does however re-render the resourceAddButtons.

:)

[tony.herstell1]

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

[tony.herstell1]

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>

[sergeysmirnov]

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

[tony.herstell1]

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>