primefaces - Primefaces 3: コンポーネント ID とウィジェット変数は同じ名前であってはなりません

Question

IE と Chrome で Primefaces 3 UI のレンダリングに問題がある理由がわかりません。

私は基本的にこのユースケースを持っています.ユーザーがクリックするとダイアログが開き、メンバーの詳細を尋ねる[新しいメンバーを追加]ボタンが必要でした。

<!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 が未定義であることも伝えています。

もう1つの奇妙なことは、Firefoxだけが私のフッターと</body> and </html>奇妙な完全な終了タグを生成することです。IE8 と Chrome の両方で、無効な HTML 構造が生成されているようです。

誰も理由を知っていますか？

更新: これは、IE から直接取得した、生成された HTML です。終了 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&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>

score 8 · Accepted Answer

ああああああああ……。

犯人はこの行にいる

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

この投稿http://forum.primefaces.org/viewtopic.php?f=3&t=18830のCagatay によると、componentId と widgetVar は同じ名前であってはなりません。

私はこれを理解できませんでした。私は Firefox のみでテストしており、問題は発生していません。

問題に気付いたのは、IE と Chrome ハットでテストしたときだけです。

とにかく、誰かがこれに遭遇するかもしれないと思って、私は自分の質問に答えました。

モデレーターは、そう感じた場合、この回答を閉じることができます。

primefaces - Primefaces 3: コンポーネント ID とウィジェット変数は同じ名前であってはなりません

1 に答える 1

Related

Reference