CODEWITHSUNDEEP
primefaces
c12
c12

Reputation: 9827

Primefaces Dialogs Form Structure

I'm using Primefaces for a project and I'm seeing bad results with IE vs chrome/firefox/safari in regards to modal Primefaces dialog windows and I think it has to do with form placement. In IE these dialogs dont appear, but I can see the transparency. In chrome/firefox they're fine. What is the best practice for the below situations:

List item base xhtml page that has one form. This page has several links that open up dialogs who have their own ajax submit (commandButton, commandLink) events.

Should the dialog be located within or outside the base xhtml page's form?
Should the dialog have its own form?

Below is an illustration:

<html>
    <ui:composition>
        <ui:define name="content">
            <h:form id="xyz">
                //main page content here, commandButtons, commandLinks...etc
            </h:form>
            <dc:zoomDialog/>
        </ui:define>
    </ui:composition>
</html>

<!-- zoomDialog maps to the below -->
<html>
<ui:component>
    <h:form id="dialogFrm"> 
        <p:dialog widgetVar="zoomDlg" modal="true" styleClass="dialog dialog2"
                draggable="false" resizable="false" showEffect="fade"
                hideEffect="fade">
            //dialog content here, commandButton, commanLink...etc
        </p:dialog>
    </h:form>
</ui:component>

Upvotes: 1

Views: 7232

Answers (1)

Matt Handy
Matt Handy

Reputation: 30025

I don't see it in your example code but some time ago I had a similar problem. The reason was: nested forms (the same symptoms as you describe: all browser work, except IE). Nested forms are not valid html. Some browsers can handle it. IE cannot.

A good test is to put the whole html outpout (browser source, not the jsf source) into the W3C Html validator and analyze the results.

In the Primefaces showcase the h:form element is always inside the p:dialog. See this discussion.

Upvotes: 3

Related Questions