confirmDialog未呈現

我目前正在瀏覽JavaEE7的教程，當前章節是JSF/PrimeFaces。我需要爲刪除操作添加確認對話框，頁面呈現正常。當我按下commandButton（第14行）時，actionListener會觸發，但confirmation.show（）會在Web控制檯中產生一個錯誤：「參考錯誤：確認未定義」，並且confirmDialog不會呈現。據我瞭解，「widgetVar =確認」是定義。想知道我做錯了什麼。confirmDialog未呈現

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
    xmlns:f="http://xmlns.jcp.org/jsf/core" 
    xmlns:h="http://xmlns.jcp.org/jsf/html" 
    xmlns:p="http://primefaces.org/ui"> 
<body> 
    <f:view contracts="#{view.locale.language}"> 
     <ui:composition template="/template.xhtml"> 
      <ui:define name ="content"> 
       <h1>#{msg['listCampaigns.my_campaigns']}</h1> 
       <h:form> 
        <p:dataTable value="#{campaignListProducer.campaigns}" var="campaign"> 
         <p:column> 
          <p:commandButton onclick="confirmation.show()" actionListener="#{listCampaignsController.doDeleteCampaign(campaign)}" icon="ui-icon-close" /> 
         </p:column> 
         <p:column> 
          <f:facet name="header">#{msg['listCampaigns.name']}</f:facet> 
          <h:outputText value="#{campaign.name}" /> 
         </p:column> 
         <p:column> 
          <f:facet name="header">#{msg['listCampaigns.target_amount']}</f:facet> 
          <h:outputText value="#{campaign.targetAmount}"> 
           <f:convertNumber type="currency" currencyCode="EUR" /> 
          </h:outputText> 
         </p:column> 
         <p:column> 
          <f:facet name="header">#{msg['listCampaigns.donated_so_far']}</f:facet> 
          <h:outputText value="#{campaign.amountdonatedSoFar}"> 
           <f:convertNumber type="currency" currencyCode="EUR" /> 
          </h:outputText> 
         </p:column> 
         <p:column> 
          <p:commandLink value="#{msg['listCampaigns.edit']}" ajax="false" action="#{listCampaignsController.doEditCampaign(campaign)}"> 
          </p:commandLink> 
         </p:column> 
         <p:column> 
          <p:commandLink value="#{msg['listCampaigns.list_donations']}" ajax="false" action="#{listCampaignsController.doListDonations(campaign)}"> 
          </p:commandLink> 
         </p:column> 
         <p:column> 
          <p:commandLink value="#{msg['listCampaigns.form']}" ajax="false" action="#{listCampaignsController.doEditDonationForm(campaign)}"> 
          </p:commandLink> 
         </p:column>               
        </p:dataTable> 
        <p:commandButton value="#{msg['listCampaigns.add_campaign']}" ajax="false" action="#{listCampaignsController.doAddCampaign()}" />        
        <p:confirmDialog message="#{msg['listCampaigns.ask_delete_campaign']}" 
            header="#{msg['listCampaigns.delete_campaign']}" 
            severity="alert" 
            widgetVar="confirmation" > 
         <p:commandButton value="#{msg['listCampaigns.yes']}" 
             oncomplete="confirmation.hide()" 
             ajax="false" 
             actionListener="#{listCampaignsController.commitDeleteCampaign}" /> 
         <p:commandButton value="#{msg['listCampaigns.no']}" onclick="confirmation.hide()" type="button" /> 
        </p:confirmDialog>       
       </h:form> 
     </ui:define> 
    </ui:composition> 
</f:view>

來源

2015-01-13 Jannis Alexakis