Create a popup inside a form

Question

I want to include a popup inside a form. The normal way to do that is to have 2 forms like:

<div class="wrapper" >
 <h:form>
    <h:panelGroup id="id1" layout="block">
     <ui:include src= content1 />
    </h:panelGroup> 
 </h:form>
</div>

<h:form id="modalId">
 <ui:include src= popupContent >
 </ui:include>
</h:form>

and render with a button inside content1, the form "modalId" that contains the popUp.

I have the popup form in an external component that is included inside "content1". Due to the popup form is inside the other form,it isnt well rendered. How can I fix that? The idea is to use that component that is common for all my xhtml views

Nested forms are not allowed in html. Not a jsf issue but a generic html one — Kukeltje, Jan 17 '17 at 10:13

Maciej Kowalski · Accepted Answer · 2017-01-17T12:55:04.563

The way i was writing my own components was to rely on the existance of the external form. That is, i did not include any form elements inside the component. If there was a need to reference the outer form element then i would just pass the from id as one of the attributes of the interface. Composite components are really useful for this kind of stuff:

<composite:interface>
    <composite:attribute name="formId" type="java.lang.String" />
</composite:interface>
<composite:implementation>
    <h:commandButton value="button" action="someaction">
        <f:ajax execute="#{cc.attrs.formId}" render="#{cc.attrs.formId}" />
    </h:commandButton>
</composite:implementation>

Then you include that in your outer form (assuming 'comp' is your namespace for composite components and 'modal' is the name of the file containing the component):

<h:form id="myForm">
   <comp:modal formId="myForm"/>
</h:form>

Go through this tutorial if you are not familiar with them: http://docs.oracle.com/javaee/6/tutorial/doc/giqzr.html

Create a popup inside a form

1 Answers1