2

I am getting confused why IE and Chrome is having trouble rendering my Primefaces 3 UI.

I have basically this use case: I wanted to have an Add New Member button that when user clicks it a dialog will open asking for member details.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>
<h:body>
    <ui:composition template="../../WEB-INF/MyTemplate.xhtml">
        <ui:define name="content">
            <h:form id="memberListForm">
                <p:panel styleClass="search-panel">
                    <h:panelGrid columns="2">
                        <h:outputText value="#{msgs.firstName}" styleClass="label" />
                        <h:inputText />
                    </h:panelGrid>
                    <h:panelGrid columns="2">
                        <h:outputText value="#{msgs.lastName}" styleClass="label" />
                        <h:inputText />
                    </h:panelGrid>
                    <p:commandButton value="Search" ajax="false" />
                    <p:commandButton value="Add New Member" type="button"
                        onclick="addMemberDialog.show()" />
                </p:panel>

                <p:panel>
                    <p:dataTable value="#{memberManagedBean.memberDataModel}"
                        id="membersTable" var="member" paginator="true" rows="10"
                        selectionMode="single"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="5,10,15">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText>#{msgs.firstName}</h:outputText>
                            </f:facet>
                            <h:outputText value="#{member.firstName}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText>Middle Name</h:outputText>
                            </f:facet>
                            <h:outputText value="#{member.middleName}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText>Last Name</h:outputText>
                            </f:facet>
                            <h:outputText value="#{member.lastName}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText>Membership Date</h:outputText>
                            </f:facet>
                            <h:outputText value="#{member.membershipDate}">
                                <f:convertDateTime pattern="MMM dd, yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText>Status</h:outputText>
                            </f:facet>
                            <h:outputText value="#{member.status}" />
                        </p:column>
                    </p:dataTable>
                </p:panel>
            </h:form>

            <p:dialog id="addMemberDialog" header="Member Details"
                widgetVar="addMemberDialog" resizable="false" closable="false">
                <h:form id="createupdateform">
                    <p:messages id="messages" autoUpdate="true" />
                    <h:outputText value="Test Dialog!" />
                    <p:panelGrid columns="2" id="panel">
                        <f:facet name="header">
                            Create Member
                        </f:facet>
                        <h:outputLabel value="First Name:" for="firstName" />
                        <p:inputText label="First Name" id="firstName" title="First Name"
                            required="true" value="#{memberManagedBean.newMember.firstName}">
                            <f:validateRegex pattern=".*\p{Alpha}{3,16}" />
                        </p:inputText>
                        <h:outputLabel value="Middle Name:" for="middleName" />
                        <p:inputText label="Middle Name" id="middleName"
                            title="Middle Name" required="true"
                            value="#{memberManagedBean.newMember.middleName}">
                            <f:validateRegex pattern=".*\p{Alpha}{3,16}" />
                        </p:inputText>

                        <h:outputLabel value="Last Name:" for="lastName" />
                        <p:inputText label="Last Name" id="lastName" title="Last Name"
                            required="true" value="#{memberManagedBean.newMember.lastName}">
                            <f:validateRegex pattern=".*\p{Alpha}{3,16}" />
                        </p:inputText>

                        <h:outputLabel value="Membership Date:" for="membershipDate" />
                        <p:calendar id="popupButtonCal" />

                        <f:facet name="footer">
                            <p:commandButton value="Save" 
                                actionListener="#{memberManagedBean.createOrUpdateListener}" />
                            <p:commandButton value="Cancel" immediate="true"
                                process="@this"
                                oncomplete="addMemberDialog.hide()" />
                        </f:facet>
                    </p:panelGrid>
                </h:form>
            </p:dialog>
        </ui:define>
    </ui:composition>
</h:body>
</html>

On firefox, no issue is encountered. Dialogs comes out.

But on Chrome and IE, nothing is happening when I click the button.
IE is also telling that addMemberDialog is undefined.

Another strange thing, only Firefox generates my footer and the complete </body> and </html> end tag which is strange. Both IE8 and Chrome seems to have an invalid HTML structure generated.

Does anyone know the reason?

UPDATED: This is the generated HTML taken directly from IE. Notice that there are no ending body and html tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/common.css?ln=css" /><link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.2" /><script type="text/javascript" src="/SI/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/SI/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.2"></script>
    <title>Sample App
    </title></head><body>
    <div id="header">
            <!-- &lt;h1&gt;SI Management System&lt;/h1&gt; -->
            <h2>Testing</h2>
            <!--  include your header file or uncomment the include below and create header.xhtml in this directory -->
            <!-- &lt;ui:include src=&quot;header.xhtml&quot;/&gt; -->
    </div>


    <div id="content">
<form id="memberListForm" name="memberListForm" method="post" action="/SI/faces/pages/members/showmembers.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="memberListForm" value="memberListForm" />
<div id="memberListForm:j_idt12" class="ui-panel ui-widget ui-widget-content ui-corner-all search-panel"><div id="memberListForm:j_idt12_content" class="ui-panel-content ui-widget-content"><table>
<tbody>
<tr>
<td><span class="label">First Name:</span></td>
<td><input type="text" name="memberListForm:j_idt15" /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td><span class="label">Last Name:</span></td>
<td><input type="text" name="memberListForm:j_idt18" /></td>
</tr>
</tbody>
</table>
<button id="memberListForm:j_idt19" name="memberListForm:j_idt19" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit"><span class="ui-button-text">Search</span></button><script id="memberListForm:j_idt19_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_memberListForm_j_idt19',{id:'memberListForm:j_idt19'});</script><button id="memberListForm:j_idt20" name="memberListForm:j_idt20" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="addMemberDialog.show();" type="button"><span class="ui-button-text">Add New Member</span></button><script id="memberListForm:j_idt20_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_memberListForm_j_idt20',{id:'memberListForm:j_idt20'});</script></div></div><script id="memberListForm:j_idt12_s" type="text/javascript">PrimeFaces.cw('Panel','widget_memberListForm_j_idt12',{id:'memberListForm:j_idt12'});</script><div id="memberListForm:membersTable" class="ui-datatable ui-widget"><table role="grid"><thead><tr><th id="memberListForm:membersTable_paginator_top" class="ui-paginator ui-paginator-top ui-widget-header" colspan="5"><span class="ui-paginator-current">(1 of 1)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all">1</span></span><span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-end">p</span></span><select class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" value="10"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></th></tr><tr role="row"><th id="memberListForm:membersTable:j_idt35" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th><th id="memberListForm:membersTable:j_idt24" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th><th id="memberListForm:membersTable:j_idt41" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th><th id="memberListForm:membersTable:j_idt44" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th><th id="memberListForm:membersTable:j_idt47" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th></tr></thead><tfoot><tr><td id="memberListForm:membersTable_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header" colspan="5"><span class="ui-paginator-current">(1 of 1)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all">1</span></span><span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-end">p</span></span><select class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" value="10"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></td></tr></tfoot><tbody id="memberListForm:membersTable_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" data-rk="1" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">john cesar</div></td><td role="gridcell"><div class="ui-dt-c">jamora</div></td><td role="gridcell"><div class="ui-dt-c">alojado</div></td><td role="gridcell"><div class="ui-dt-c">Dec 31, 2009</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="1" data-rk="2" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">frank</div></td><td role="gridcell"><div class="ui-dt-c"></div></td><td role="gridcell"><div class="ui-dt-c">nimphius</div></td><td role="gridcell"><div class="ui-dt-c">May 31, 2008</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="2" data-rk="3" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">buboy</div></td><td role="gridcell"><div class="ui-dt-c"></div></td><td role="gridcell"><div class="ui-dt-c">closas</div></td><td role="gridcell"><div class="ui-dt-c">Oct 10, 2011</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="3" data-rk="4" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">imee norwene</div></td><td role="gridcell"><div class="ui-dt-c">alojado</div></td><td role="gridcell"><div class="ui-dt-c">ellen</div></td><td role="gridcell"><div class="ui-dt-c">Mar 02, 2004</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="4" data-rk="5" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">jon</div></td><td role="gridcell"><div class="ui-dt-c"></div></td><td role="gridcell"><div class="ui-dt-c">jone</div></td><td role="gridcell"><div class="ui-dt-c">Jan 08, 2000</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="5" data-rk="6" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">frank</div></td><td role="gridcell"><div class="ui-dt-c"></div></td><td role="gridcell"><div class="ui-dt-c">mir</div></td><td role="gridcell"><div class="ui-dt-c">Aug 10, 2004</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr><tr data-ri="6" data-rk="7" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"><td role="gridcell"><div class="ui-dt-c">ted</div></td><td role="gridcell"><div class="ui-dt-c"></div></td><td role="gridcell"><div class="ui-dt-c">o'connor</div></td><td role="gridcell"><div class="ui-dt-c">Jan 01, 2002</div></td><td role="gridcell"><div class="ui-dt-c">A</div></td></tr></tbody></table><input type="hidden" id="memberListForm:membersTable_selection" name="memberListForm:membersTable_selection" autocomplete="off" value="" /></div><script id="memberListForm:membersTable_s" type="text/javascript">$(function() {PrimeFaces.cw('DataTable','widget_memberListForm_membersTable',{id:'memberListForm:membersTable',paginator:{id:['memberListForm:membersTable_paginator_top','memberListForm:membersTable_paginator_bottom'],rows:10,rowCount:7,page:0,currentPageTemplate:'({currentPage} of {totalPages})'},selectionMode:'single'});});</script>
4

1 回答 1

8

啊啊啊啊……

罪魁祸首在这一行

<p:dialog id="addMemberDialog" header="Member Details"
                widgetVar="addMemberDialog" resizable="false" closable="false">

根据 Cagatay 在这篇文章http://forum.primefaces.org/viewtopic.php?f=3&t=18830中的说法，componentId 和 widgetVar 不应具有相同的名称。

我无法弄清楚这一点，我只在 Firefox 上进行测试，我没有遇到问题。

只有在 IE 和 Chrome hat 中进行测试时，我才会注意到这个问题。

无论如何，我只是回答了我自己的问题，认为有人可能会遇到这个问题。

如果版主觉得如此，他们可以关闭此答案。

于 2012-05-14T10:56:09.873 回答