Первичные элементы 3: Идентификатор компонента и Виджет Var не должны иметь одно и то же имя
Я запутался, почему у IE и Chrome возникают проблемы с отображением моего интерфейса Primefaces 3.
У меня есть в основном этот прецедент:
Я хотел бы добавить кнопку "Добавить нового участника", когда при нажатии на нее откроется диалог с запросом деталей участника.
<!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>
В firefox проблема не возникает. Появляются диалоговые окна.
Но в Chrome и IE ничего не происходит, когда я нажимаю кнопку.
IE также сообщает, что addMemberDialog undefined.
Еще одна странная вещь: только Firefox генерирует мой нижний колонтитул и полный тег </body> and </html> end
что странно. Как IE8, так и Chrome, похоже, имеют недопустимую структуру HTML.
Кто-нибудь знает причину?
ОБНОВЛЕНО:
Это сгенерированный HTML, полученный непосредственно из IE. Обратите внимание, что нет тега body и html.
<!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>
Ответы
Ответ 1
Arrggghhhhh....
Преступник находится в этой строке
<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. Я замечаю проблему.
Во всяком случае, я просто ответил на свой вопрос, думая, что кто-то может столкнуться с этим.
Модераторы могли бы закрыть этот ответ, если они это почувствуют.
