Closing popup panel on form submit

[clintonjmurdoch]

My page is displaying a table of 'team', and I want the user to select one to edit and have it show a popup panel with the form to edit or add a new one.

When the update button is selected, the form values are validated client side and are sent to the bean and the data is updated in the database, but the popup panel doesn't hide. the original table rerenders in the background too, so the only thing that isnt happening is the hiding of the panel.

I have tried this with the form inside the popup panel and outside with the domelementattachment set, but the behaviour is the same.

{code:xml}



<rich:popupPanel autosized="true" width="600" modal="true"




id="editteampanel"




onmaskclick="#{rich:component('editteampanel')}.hide()">




<f:facet name="header">





<h:outputText value="Edit Team" />




</f:facet>




<f:facet name="controls">





<h:panelGroup>






<a4j:commandLink id="closeetplink"







oncomplete="#{rich:component('editteampanel')}.hide()">







<h:graphicImage value="/resources/images/close.png"








styleClass="hidelink" />






</a4j:commandLink>





</h:panelGroup>




</f:facet>




<h:form id="Team" onsubmit="#{rich:component('editteampanel')}.hide()">





<a4j:outputPanel id="outpanel" ajaxRendered="true">






<h:panelGrid columns="3">







<h:outputText value="Team ID: " />







<h:inputText id="teamid" readonly="true"








value="#{teamUpdater.team.teamId}" />







<rich:message for="teamid" />







<h:outputText value="Team Name: " />







<h:inputText id="teamname" value="#{teamUpdater.team.teamName}"








required="true">








<f:validateRequired />








<rich:validator/>







</h:inputText>







<rich:message for="teamname" />







<a4j:region>








<a4j:commandButton value="Cancel"









onclick="#{rich:component('editteampanel')}.hide()" />







</a4j:region>







<a4j:commandButton render="teamtable, teammsg" value="Update"








execute="@form" action="#{teamUpdater.store}">







</a4j:commandButton>






</h:panelGrid>





</a4j:outputPanel>




</h:form>



</rich:popupPanel>
{code}

[healeyb]

Why would the update button close the dialog, it doesn't even try to close it unless you're expecting the onmaskclick

to do this. Why not just add oncomplete="#{rich:component('editteampanel')}.hide()" to this button:

<a4j:commandButton render="teamtable, teammsg" value="Update" execute="@form" action="#{teamUpdater.store}"/>

Regards,

Brendan.

[clintonjmurdoch]

that's what i originally had, oncomplete for the command button, but then the panel would close regardless of field validation. i've added onsubmit="#{rich:component('editteampanel')}.hide()" to the form element so that it will only close the panel when the form is successfully submitted - ie client side validation is successful. that way if validation fails, the panel stays up and the user can correct the validation problems, but then if validation is successful, the form is submitted and the panel is closed. this doesn't happen though - the form is submitted but the panel doesn't close.

also, do you know how i can get the code to display properly?

Thanks,

Clinton

[healeyb]

Ah, now I see what you're trying to do, this should do it:

<a4j:commandButton

    oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editteampanel')}.hide(); return false;"

Regards,

Brendan.

[navurinv]

Clinton Murdoch wrote:

My page is displaying a table of 'team', and I want the user to select one to edit and have it show a popup panel with the form to edit or add a new one.

When the update button is selected, the form values are validated client side and are sent to the bean and the data is updated in the database, but the popup panel doesn't hide. the original table rerenders in the background too, so the only thing that isnt happening is the hiding of the panel.

I have tried this with the form inside the popup panel and outside with the domelementattachment set, but the behaviour is the same.

<rich:popupPanel autosized="true" width="600" modal="true"id="editteampanel"onmaskclick="#{rich:component('editteampanel')}.hide()"><f:facet name="header"><h:outputText value="Edit Team" /></f:facet><f:facet name="controls"><h:panelGroup><a4j:commandLink id="closeetplink"oncomplete="#{rich:component('editteampanel')}.hide()"><h:graphicImage value="/resources/images/close.png"styleClass="hidelink" /></a4j:commandLink></h:panelGroup></f:facet><h:form id="Team" onsubmit="#{rich:component('editteampanel')}.hide()"><a4j:outputPanel id="outpanel" ajaxRendered="true"><h:panelGrid columns="3"><h:outputText value="Team ID: " /><h:inputText id="teamid" readonly="true"value="#{teamUpdater.team.teamId}" /><rich:message for="teamid" />

<h:outputText value="Team Name: " /><h:inputText id="teamname" value="#{teamUpdater.team.teamName}"required="true"><f:validateRequired /><rich:validator/></h:inputText><rich:message for="teamname" />

<a4j:region><a4j:commandButton value="Cancel"onclick="#{rich:component('editteampanel')}.hide()" /></a4j:region><a4j:commandButton render="teamtable, teammsg" value="Update"execute="@form" action="#{teamUpdater.store}"></a4j:commandButton></h:panelGrid></a4j:outputPanel></h:form></rich:popupPanel>

<a4j:region><a4j:commandButton value="Cancel"onclick="#{rich:component('editteampanel')}.hide()" /></a4j:region><a4j:commandButton render="teamtable, teammsg" value="Update"execute="@form" action="#{teamUpdater.store}"></a4j:commandButton></h:panelGrid></a4j:outputPanel></h:form></rich:popupPanel>

pleae remove execute="@form"

and give id name in render attribute

[clintonjmurdoch]

Thanks Brendan, that seems to be working!

[healeyb]

Glad it's working.