Primefaces 3: Component ID und Widget Var sollten nicht den gleichen Namen haben
Ich bin verwirrt, warum IE und Chrome Probleme beim Rendern meiner Primefaces 3-Benutzeroberfläche haben.
Ich habe im Grunde diesen Anwendungsfall: Ich wollte eine Schaltfläche zum Hinzufügen eines neuen Mitglieds haben, über die beim Klicken des Benutzers ein Dialogfeld geöffnet wird, in dem Sie nach den Details des Mitglieds gefragt werden.
<code><!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>
</code>Auf Firefox ist kein Problem aufgetreten. Dialoge kommen heraus.
Bei Chrome und IE passiert jedoch nichts, wenn ich auf die Schaltfläche klicke.
IE sagt auch, dass addMemberDialog undefiniert ist.
Eine andere seltsame Sache, nur Firefox generiert meine Fußzeile und die komplette</body> and </html> End-Tag, das seltsam ist. Sowohl in IE8 als auch in Chrome scheint eine ungültige HTML-Struktur generiert worden zu sein.
Kennt jemand den Grund?
AKTUALISIERTE: Dies ist der generierte HTML-Code, der direkt aus dem IE stammt. Beachten Sie, dass es keinen Endtext und kein HTML-Tag gibt.
<code><!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&v=3.2" /><script type="text/javascript" src="/SI/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=3.2"></script><script type="text/javascript" src="/SI/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=3.2"></script>
<title>Sample App
</title></head><body>
<div id="header">
<!-- <h1>SI Management System</h1> -->
<h2>Testing</h2>
<!-- include your header file or uncomment the include below and create header.xhtml in this directory -->
<!-- <ui:include src="header.xhtml"/> -->
</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>
</code>