Cannot submit h:form on conditionally rendered rich:panel

Question

I'm having an issue submitting the contents of a form that is within a conditionally rendered rich:panel. I have a commandButton within the form whose action is supposed to execute a method on my backing bean, but the method is never invoked and instead the entire page is re-rendered. I've read in similar questions that the issue is related to theView state, but I've tried to follow the answers people have given with no luck.

Here is a snippet from my main xhtml page that is used to set the boolean controlling the panel render to 'true' (it is within a data grid):

<a4j:commandLink execute="@this" value="#{tableData.itemNumber}" render="edit editRowPanel editForm" title="View/Edit Record Detail"
                                action="#{navigate.setShowEdit(true)}" oncomplete="RichFaces.$('pleaseWaitView:searchWaitPanel').hide()" >
   <f:setPropertyActionListener target="#{context.currentItem}" value="#{tableData}" />
</a4j:commandLink>

The above code is rendering the panel as it should.

Here is the code from the main xhtml page that displays the panel:

<h:panelGroup id="edit">
   <rich:panel id="editRowPanel" rendered="#{navigate.isShowEdit()}" style="padding: 10px" >
      <f:facet name="header">
         <h:outputText value="Edit Row"/>
      </f:facet>
      <ui:include src="detail-page.xhtml" />
   </rich:panel>
</h:panelGroup>

Here is the submit button code that is within the form on detail-page.xhtml:

<h:commandButton styleClass="button" value="#{bundle.SaveChangesButton}" action="#{pplSuspenseBean.performRecordSave}" />

If I set "rendered="true"" on my editRowPanel everything works fine, it is only when render based on the condition that it does not work. Any suggestions to fix this would be greatly appreciated, thanks!

Hi, "render=false" means that the panel will not be added to the page (not exist at all), so trying to show it will not work, you need to use "visible" attribute not render — Ali Saleh
Well, the editRowPanel "rendered" attribute is intially set to 'false', but is wrapped inside of a panelGroup which is rendered (I read this was the correct way to do this). Also, neither h:panelGroup or rich:panel have a "visible" attribute available to me. Maybe there is a different wrapper I could use other than h:panelGroup that does provide this attribute? — schuno
Is the showEdit set to false during this process? Do you have nested forms? — Makhiel
Unless the entire page is being re-rendered I do not think that showEdit would be set to false again, and there is only a single form on the panel that I am trying to render. — schuno

schuno schuno · Accepted Answer · 2015-04-07T14:35:44

I've decided to just use the CSS "display" property to show and hide my panel, since security is not much of a concern in this case (just an input form that allows editing only if the user is a certain role).

I created a CSS class to hide the panel:

.nodisplay {
    display: none;
}

I then set the styleClass on my the h:panelGroup to "nodisplay":

<h:panelGroup id="edit" styleClass="nodisplay">
   <rich:panel id="editRowPanel" style="padding: 10px" >
      <f:facet name="header">
         <h:outputText value="Edit Row"/>
      </f:facet>
      <ui:include src="detail-page.xhtml" />
   </rich:panel>
</h:panelGroup>

and changed my a4j:commandLink to remove this style class onClick:

<a4j:commandLink value="#{tableData.itemNumber}" title="View/Edit Record Detail" 
   render="editRowPanel" oncomplete="RichFaces.$('pleaseWaitView:searchWaitPanel').hide()" 
   onclick="$(edit).removeClass('nodisplay');>
   <f:setPropertyActionListener target="#{context.currentItem}" value="#{tableData}" />
</a4j:commandLink>

I also have another link within the panel that reapplies this style class so the panel is once again hidden.

This is an adequate solution for what I am trying to accomplish.

Cannot submit h:form on conditionally rendered rich:panel

1 Answers