Richfaces <a4j:ajax> and <rich:popupPanel> “conflict”

Question

I've stumbled upon a strage behavior of richfaces. Some background about my view structure:

• It's mainly a <rich:extendedDataTable> where a click on a row displays info about it on a <a4j:outputPanel>

• Also, each row has a context menu with items like "Create", "Edit", etc... that pops a <rich:popupPanel>

The component structure is this:

<h:panelGrid columns="2">
    <h:column>
        <rich:dataScroller for="testTable" maxPages="7"/>
        <rich:extendedDataTable id="testTable" value="#{testController.items}" rendered="#{testController.items.rowCount != 0}"
        selection="#{testController.selectedRow}" noDataLabel="No results to show" var="test" rows="20"
        style="width: 790px" selectionMode="single">

            <a4j:ajax execute="@form"
                event="selectionchange" 
                listener="#{testController.selectionListener}"
                render=":res"/>

            {columns to display}

        </rich:extendedDataTable>
    </h:column>

    <a4j:outputPanel id="res">
        <rich:panel header="Selected Rows:" rendered="#{not empty testController.selectedRows}">
            <rich:list type="unordered" value="#{testController.selectedRows}" var="t">
                <h:outputText value="#{t.name}"/>
                <br/>
                <h:outputText value="#{t.details}" converter="#{testConverter}"/>
            </rich:list>
        </rich:panel>
    </a4j:outputPanel>
</h:panelGrid>

<rich:contextMenu target="testTable" mode="ajax" id="contextMenu">
    <rich:menuItem label="Edit" render="popupEdit" oncomplete="#{rich:component('popupEdit')}.show();" mode="ajax"/>
</rich:contextMenu>

<rich:popupPanel id="popupEdit" modal="true" autosized="true" resizeable="false" moveable="false" domElementAttachment="form">
    <rich:hotKey key="esc" onkeyup="#{rich:component('popupEdit')}.hide(); return false;"/>
    <f:facet name="header">
        <h:outputText value="Edit Test"/>
    </f:facet>
    <f:facet name="controls">
        <h:outputLink value="#" onclick="#{rich:component('popupEditar')}.hide(); return false;">
            <h:graphicImage value="/resources/css/images/fechar_janela.png" width="20" height="20"/>
        </h:outputLink>
    </f:facet>

    <h:panelGrid id="popupEditContent" columns="2">
        ... {display of info}

            <a4j:commandButton value="Salvar" actionListener="#{testeController.update()}" render="tabelaTestes, contextMenu"/>
            <h:panelGroup id="messagePanel" layout="block">
                <rich:messages ajaxRendered="true" />
            </h:panelGroup>
    </h:panelGrid>
</rich:popupPanel>

And now the strange behaviour (using NetBeans):

• Deploy the app from NetBeans;
• Open the URL of the deployed project on browser (Firefox) . The <a4j:ajax> inlined in the table doesn't work, I know this because the 'testController.selectionListener' is not called and the details are not displayed (it sets the attribute current in the backing bean). The contextMenu works but the popupPanel shows null or empty properties in all fields (the current attribute is not set);
• Go back to the IDE, remove all the <rich:popupPanel> section and save the file;
• Back in the browser, hit F5 and click a row. Now the <a4j:ajax> works and calls testController.selectionListener, showing the details in <a4j:outputPanel>. The context menu works but (obviously) the panel does not pop;
• In the IDE, put back the <rich:popupPanel> section and save the file;
• Now refresh the page again, and everything works, details are shown and the Edit pop up shows the right info of the selected row.

I have tried deploying it without the <rich:popupPanel> section and the selecionListener gets called. I think that the problem is deploying the page with both <a4j:ajax> and <rich:popupPanel> sections, hence the "conflict".

1. I took the structure from the richfaces showcase and made changes. I noticed that in the showcase, the <rich:popupPanel> is placed outside the <h:form> tag, wich in my project is placed in the template.xhtml (so a topmenu page works). Is it possible that the error is caused by this placement?

2. Could this be considered a bug to file in the richfaces project or am I missing something there?

3. Is there a workaround or solution?

Thank you very much!

Answer 1

I think I have solved it. I set the id attribute to "form" in the <h:form> tag, in template.xhtml, so now it looks like this:

<h:body>
    <h:form id="form">
        <div id="top" class="top">
            <ui:insert name="top">Top</ui:insert>
        </div>
        <div id="content" class="center_content">
           <ui:insert name="content">Content</ui:insert>
        </div>
    </h:form>
</h:body>

It was the only change I made and now all the components work at first post-deploy.

Edit: Found the solution when searching for another problem: JSF action call on secon click