CODEWITHSUNDEEP
jsf-2primefaces
Cyd
Cyd

Reputation: 27

Primefaces popup dialog not working

I have a jsf page having a popup button that opens a following dialog popup:

</h:form>
<p:dialog id="dialog" header="Select different user"
        widgetVar="dlg" appendToBody="true">

    <h:form id="form23">
        <h:panelGrid columns="2" cellpadding="5">
            <h:outputLabel for="username" value="Username:" />
            <p:inputText value="#{loginBean.username}" 
                id="username" required="true" label="username" />

            <h:outputLabel for="password" value="Password:" />
            <h:inputSecret value="#{loginBean.password}" 
                id="password" required="true" label="password" />

            <f:facet name="footer">
                <p:commandButton id="loginButton" value="Login" />
            </f:facet>
        </h:panelGrid>
    </h:form>
</h:form>

But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!

I tried that but still the same problem persists..below is my modified code..

<h:form id="create-ticket">
    <p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true">

    <h:panelGrid columns="2" cellpadding="5">
        <h:outputLabel for="username" value="Username:" />
        <p:inputText value="#{loginBean.username}" 
                id="username" required="true" label="username" />

        <h:outputLabel for="password" value="Password:" />
        <h:inputSecret value="#{loginBean.password}" 
                id="password" required="true" label="password" />

        <f:facet name="footer">
            <p:commandButton id="loginButton" value="Login" 
                />
        </f:facet>
    </h:panelGrid>

 </p:dialog>
     <h:panelGroup>
     <h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"></h:outputLabel>
    </h:panelGroup>
    <h:panelGroup id="search_section" layout="block"
       styleClass="atf-content-area atf-separarot-botton">   <!-- This is the section where we get the grey background -->
         <h:panelGroup id="input_search_section" styleClass="">
            <h:outputText id="name" value="Siddharth Mishra"    
            labelStyleClass="atf-label">
            </h:outputText>
        </h:panelGroup>
    <h:panelGroup styleClass="atf-right atf-inline-block">
        <p:commandButton id="btn_search" value="select different user"
            styleClass="atf-button-search" onclick="dlg.show();" type="button"
            >

        </p:commandButton>
    </h:panelGroup>

</h:panelGroup>

Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advanceenter image description here

Upvotes: 1

Views: 4764

Answers (1)

John Smith
John Smith

Reputation: 21

You need to restructure your code.

*Don't nest forms inside other forms.

*You dont have the end-tag of your p:dialog.

<h:form>    
    <p:dialog id="dialog" header="Select different user"
            widgetVar="dlg" appendToBody="true">

          //Content ex inputtext

    </p:dialog>

<p:commandButton value="Show Dialog" onclick="dlg.show();" type="button" />  
</h:form>

Upvotes: 2

Related Questions