Primefaces 3: Komponenten-ID und Widget Var sollten nicht den gleichen Namen haben
Ich bin immer verwirrt, warum IE und Chrome hat Probleme beim Rendern meiner Primefaces 3 UI.
Ich habe im Grunde das use-case:
Ich wollte noch ein Add New Member-button, wenn Benutzer darauf klickt, wird ein Dialogfeld öffnet sich Fragen, für die 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>Auf firefox, kein Problem aufgetreten ist. Dialoge heraus kommt.
Aber in Chrome und IE ist nichts passiert, wenn ich klicken Sie auf die Schaltfläche.
Der IE ist auch zu sagen, dass addMemberDialog ist nicht definiert.
Andere seltsame Sache, nur Firefox erzeugt meiner Fußzeile und die komplette </body> and </html> end-tag
das ist seltsam. Sowohl IE8 und Chrome zu haben scheint, eine ungültige HTML-Struktur generiert.
Kennt jemand den Grund?
AKTUALISIERT:
Dies ist der generierte HTML-Code stammt direkt aus dem IE. Beachten Sie, dass es gibt kein Ende Körper und html-Tags.
<!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>
Sie haben einige benutzerdefinierte javascript auf Ihrer Seite? Eine fehlende
Anscheinend ist keiner Matt... ich aktualisierte die Frage
Vielen Dank wieder Matt.. ich werde dies im Hinterkopf behalten..
CDATA um dieses Skript einmal verursacht ein ähnliches Verhalten in einem meiner Projekte.Anscheinend ist keiner Matt... ich aktualisierte die Frage
Vielen Dank wieder Matt.. ich werde dies im Hinterkopf behalten..
InformationsquelleAutor Mark Estrada | 2012-05-14
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Arrggghhhhh....
Der Täter ist in dieser Zeile
Laut Cagatay in diesem Beitrag http://forum.primefaces.org/viewtopic.php?f=3&t=18830 der componentId und widgetVar sollten nicht den gleichen Namen haben.
War ich nicht in der Lage, um dies herauszufinden, Teste ich ausschließlich mit Firefox und habe keine Probleme.
Es ist nur beim testen im IE und Chrome hat Bemerke ich das Problem.
Jedenfalls habe ich gerade meine Frage selbst beantwortet zu denken, dass jemand könnte diese Begegnung.
Moderatoren könnten geschlossen, dass diese Antwort, wenn Sie fühlen sich so.
InformationsquelleAutor Mark Estrada