title: Primefaces 3: Component ID and Widget Var should not have the same name
body: <p>I am getting confused why IE and Chrome is having trouble rendering my Primefaces 3 UI.</p>
  
  <p>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.</p>
  
  
  
  <pre class="lang-xml prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;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"&gt;
  &lt;h:head&gt;
  
  &lt;/h:head&gt;
  &lt;h:body&gt;
      &lt;ui:composition template="../../WEB-INF/MyTemplate.xhtml"&gt;
          &lt;ui:define name="content"&gt;
              &lt;h:form id="memberListForm"&gt;
                  &lt;p:panel styleClass="search-panel"&gt;
                      &lt;h:panelGrid columns="2"&gt;
                          &lt;h:outputText value="#{msgs.firstName}" styleClass="label" /&gt;
                          &lt;h:inputText /&gt;
                      &lt;/h:panelGrid&gt;
                      &lt;h:panelGrid columns="2"&gt;
                          &lt;h:outputText value="#{msgs.lastName}" styleClass="label" /&gt;
                          &lt;h:inputText /&gt;
                      &lt;/h:panelGrid&gt;
                      &lt;p:commandButton value="Search" ajax="false" /&gt;
                      &lt;p:commandButton value="Add New Member" type="button"
                          onclick="addMemberDialog.show()" /&gt;
                  &lt;/p:panel&gt;
  
                  &lt;p:panel&gt;
                      &lt;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"&gt;
                          &lt;p:column&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText&gt;#{msgs.firstName}&lt;/h:outputText&gt;
                              &lt;/f:facet&gt;
                              &lt;h:outputText value="#{member.firstName}" /&gt;
                          &lt;/p:column&gt;
                          &lt;p:column&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText&gt;Middle Name&lt;/h:outputText&gt;
                              &lt;/f:facet&gt;
                              &lt;h:outputText value="#{member.middleName}" /&gt;
                          &lt;/p:column&gt;
                          &lt;p:column&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText&gt;Last Name&lt;/h:outputText&gt;
                              &lt;/f:facet&gt;
                              &lt;h:outputText value="#{member.lastName}" /&gt;
                          &lt;/p:column&gt;
                          &lt;p:column&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText&gt;Membership Date&lt;/h:outputText&gt;
                              &lt;/f:facet&gt;
                              &lt;h:outputText value="#{member.membershipDate}"&gt;
                                  &lt;f:convertDateTime pattern="MMM dd, yyyy" /&gt;
                              &lt;/h:outputText&gt;
                          &lt;/p:column&gt;
                          &lt;p:column&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText&gt;Status&lt;/h:outputText&gt;
                              &lt;/f:facet&gt;
                              &lt;h:outputText value="#{member.status}" /&gt;
                          &lt;/p:column&gt;
                      &lt;/p:dataTable&gt;
                  &lt;/p:panel&gt;
              &lt;/h:form&gt;
  
              &lt;p:dialog id="addMemberDialog" header="Member Details"
                  widgetVar="addMemberDialog" resizable="false" closable="false"&gt;
                  &lt;h:form id="createupdateform"&gt;
                      &lt;p:messages id="messages" autoUpdate="true" /&gt;
                      &lt;h:outputText value="Test Dialog!" /&gt;
                      &lt;p:panelGrid columns="2" id="panel"&gt;
                          &lt;f:facet name="header"&gt;
                              Create Member
                          &lt;/f:facet&gt;
                          &lt;h:outputLabel value="First Name:" for="firstName" /&gt;
                          &lt;p:inputText label="First Name" id="firstName" title="First Name"
                              required="true" value="#{memberManagedBean.newMember.firstName}"&gt;
                              &lt;f:validateRegex pattern=".*\p{Alpha}{3,16}" /&gt;
                          &lt;/p:inputText&gt;
                          &lt;h:outputLabel value="Middle Name:" for="middleName" /&gt;
                          &lt;p:inputText label="Middle Name" id="middleName"
                              title="Middle Name" required="true"
                              value="#{memberManagedBean.newMember.middleName}"&gt;
                              &lt;f:validateRegex pattern=".*\p{Alpha}{3,16}" /&gt;
                          &lt;/p:inputText&gt;
  
                          &lt;h:outputLabel value="Last Name:" for="lastName" /&gt;
                          &lt;p:inputText label="Last Name" id="lastName" title="Last Name"
                              required="true" value="#{memberManagedBean.newMember.lastName}"&gt;
                              &lt;f:validateRegex pattern=".*\p{Alpha}{3,16}" /&gt;
                          &lt;/p:inputText&gt;
  
                          &lt;h:outputLabel value="Membership Date:" for="membershipDate" /&gt;
                          &lt;p:calendar id="popupButtonCal" /&gt;
  
                          &lt;f:facet name="footer"&gt;
                              &lt;p:commandButton value="Save" 
                                  actionListener="#{memberManagedBean.createOrUpdateListener}" /&gt;
                              &lt;p:commandButton value="Cancel" immediate="true"
                                  process="@this"
                                  oncomplete="addMemberDialog.hide()" /&gt;
                          &lt;/f:facet&gt;
                      &lt;/p:panelGrid&gt;
                  &lt;/h:form&gt;
              &lt;/p:dialog&gt;
          &lt;/ui:define&gt;
      &lt;/ui:composition&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On firefox, no issue is encountered. Dialogs comes out.</p>
  
  <p>But on Chrome and IE, nothing is happening when I click the button.<br>
  IE is also telling that addMemberDialog is undefined.</p>
  
  <p>Another strange thing, only Firefox generates my footer and the complete <code>&lt;/body&gt; and &lt;/html&gt;</code> end tag
  which is strange.  Both IE8 and Chrome seems to have an invalid HTML structure generated.</p>
  
  <p>Does anyone know the reason?</p>
  
  <p><strong>UPDATED:</strong>
  This is the generated HTML taken directly from IE.  Notice that there are no ending body and html tag.</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /&gt;&lt;link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/common.css?ln=css" /&gt;&lt;link type="text/css" rel="stylesheet" href="/SI/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;amp;v=3.2" /&gt;&lt;script type="text/javascript" src="/SI/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;amp;v=3.2"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/SI/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;amp;v=3.2"&gt;&lt;/script&gt;
      &lt;title&gt;Sample App
      &lt;/title&gt;&lt;/head&gt;&lt;body&gt;
      &lt;div id="header"&gt;
              &lt;!-- &amp;lt;h1&amp;gt;SI Management System&amp;lt;/h1&amp;gt; --&gt;
              &lt;h2&gt;Testing&lt;/h2&gt;
              &lt;!--  include your header file or uncomment the include below and create header.xhtml in this directory --&gt;
              &lt;!-- &amp;lt;ui:include src=&amp;quot;header.xhtml&amp;quot;/&amp;gt; --&gt;
      &lt;/div&gt;
  
  
      &lt;div id="content"&gt;
  &lt;form id="memberListForm" name="memberListForm" method="post" action="/SI/faces/pages/members/showmembers.xhtml" enctype="application/x-www-form-urlencoded"&gt;
  &lt;input type="hidden" name="memberListForm" value="memberListForm" /&gt;
  &lt;div id="memberListForm:j_idt12" class="ui-panel ui-widget ui-widget-content ui-corner-all search-panel"&gt;&lt;div id="memberListForm:j_idt12_content" class="ui-panel-content ui-widget-content"&gt;&lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="label"&gt;First Name:&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="memberListForm:j_idt15" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="label"&gt;Last Name:&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="memberListForm:j_idt18" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;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"&gt;&lt;span class="ui-button-text"&gt;Search&lt;/span&gt;&lt;/button&gt;&lt;script id="memberListForm:j_idt19_s" type="text/javascript"&gt;PrimeFaces.cw('CommandButton','widget_memberListForm_j_idt19',{id:'memberListForm:j_idt19'});&lt;/script&gt;&lt;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"&gt;&lt;span class="ui-button-text"&gt;Add New Member&lt;/span&gt;&lt;/button&gt;&lt;script id="memberListForm:j_idt20_s" type="text/javascript"&gt;PrimeFaces.cw('CommandButton','widget_memberListForm_j_idt20',{id:'memberListForm:j_idt20'});&lt;/script&gt;&lt;/div&gt;&lt;/div&gt;&lt;script id="memberListForm:j_idt12_s" type="text/javascript"&gt;PrimeFaces.cw('Panel','widget_memberListForm_j_idt12',{id:'memberListForm:j_idt12'});&lt;/script&gt;&lt;div id="memberListForm:membersTable" class="ui-datatable ui-widget"&gt;&lt;table role="grid"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th id="memberListForm:membersTable_paginator_top" class="ui-paginator ui-paginator-top ui-widget-header" colspan="5"&gt;&lt;span class="ui-paginator-current"&gt;(1 of 1)&lt;/span&gt; &lt;span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-first"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-prev"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-pages"&gt;&lt;span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all"&gt;1&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-next"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-end"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;select class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" value="10"&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="10" selected="selected"&gt;10&lt;/option&gt;&lt;option value="15"&gt;15&lt;/option&gt;&lt;/select&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr role="row"&gt;&lt;th id="memberListForm:membersTable:j_idt35" class="ui-state-default" role="columnheader"&gt;&lt;div class="ui-dt-c"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/th&gt;&lt;th id="memberListForm:membersTable:j_idt24" class="ui-state-default" role="columnheader"&gt;&lt;div class="ui-dt-c"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/th&gt;&lt;th id="memberListForm:membersTable:j_idt41" class="ui-state-default" role="columnheader"&gt;&lt;div class="ui-dt-c"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/th&gt;&lt;th id="memberListForm:membersTable:j_idt44" class="ui-state-default" role="columnheader"&gt;&lt;div class="ui-dt-c"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/th&gt;&lt;th id="memberListForm:membersTable:j_idt47" class="ui-state-default" role="columnheader"&gt;&lt;div class="ui-dt-c"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;tr&gt;&lt;td id="memberListForm:membersTable_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header" colspan="5"&gt;&lt;span class="ui-paginator-current"&gt;(1 of 1)&lt;/span&gt; &lt;span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-first"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-prev"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-pages"&gt;&lt;span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all"&gt;1&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-next"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-seek-end"&gt;p&lt;/span&gt;&lt;/span&gt;&lt;select class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" value="10"&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="10" selected="selected"&gt;10&lt;/option&gt;&lt;option value="15"&gt;15&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;tbody id="memberListForm:membersTable_data" class="ui-datatable-data ui-widget-content"&gt;&lt;tr data-ri="0" data-rk="1" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;john cesar&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;jamora&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;alojado&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Dec 31, 2009&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="1" data-rk="2" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;frank&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;nimphius&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;May 31, 2008&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="2" data-rk="3" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;buboy&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;closas&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Oct 10, 2011&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="3" data-rk="4" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;imee norwene&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;alojado&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;ellen&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Mar 02, 2004&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="4" data-rk="5" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;jon&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;jone&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Jan 08, 2000&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="5" data-rk="6" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;frank&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;mir&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Aug 10, 2004&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-ri="6" data-rk="7" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;ted&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;o'connor&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;Jan 01, 2002&lt;/div&gt;&lt;/td&gt;&lt;td role="gridcell"&gt;&lt;div class="ui-dt-c"&gt;A&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;input type="hidden" id="memberListForm:membersTable_selection" name="memberListForm:membersTable_selection" autocomplete="off" value="" /&gt;&lt;/div&gt;&lt;script id="memberListForm:membersTable_s" type="text/javascript"&gt;$(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'});});&lt;/script&gt;
  </code></pre>