JSF+ PRIMEFACES <p:commandlink> função update

Front-end HTML
#1

Olá
Eu sou novo na programação Java e JSF +HTML e tô com dificuldade pra alterar dados em uma agenda simples

Meu xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        
        <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/estilos.css" />
         <script type="text/javascript" src="/jquery-1.12.3.js"></script>
         <script type="text/javascript" src="/jquery.maskedinput"></script>
        
        <title>Agenda</title>
    </h:head>
    <h:body>
  
        <h2>Novo Contato </h2>
        <h:form id="form">
            <p:panelGrid columns="2" class="formulario" >
         <h:outputText value="Nome "/>
         <p:inputText id="nome" value="#{contatosController.contatos.nome}" maxlength="80" required="true"  requiredMessage="Campo nome obrigatorio"/>
         <h:outputText value="Email "/>
         <p:inputText id="email" value="#{contatosController.contatos.email}" maxlength="80" required="true"  requiredMessage="Campo email obrigatorio"/>
             
             <h:outputText value="Telefone "/>
        <p:inputMask id="telefone" value="#{contatosController.contatos.telefone}" required="true"  requiredMessage="Campo telefone obrigatorio" mask="(99) 9999-9999"/>
        <h:outputText value="Cidade "/>
        <p:inputText id="cidade" value="#{contatosController.contatos.cidade}" maxlength="40" required="true"  requiredMessage="Campo cidade obrigatorio" />
        
         
          </p:panelGrid>
           
           <h:commandButton class="botao" value="Salvar" id="salvar" actionListener="#{contatosController.adicionar(actionEvent)}"/> 

        </h:form> 
        
        
        
       <h:form id="tabela">
         <p:dataTable id="contatos" value="#{contatosController.listaContatos}" class="exibicao" var="contatos">
            <p:column>
                            <f:facet name="header">
                                <h:outputText value="Nome"/>
                                   </f:facet>
                            <h:outputText value="#{contatos.nome}" />
                        </p:column>
                        <p:column>
                            
                            <f:facet name="header">
                                <h:outputText value="E-mail"/>
                            </f:facet>
                            <h:outputText value="#{contatos.email}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Telefone"/>
                            </f:facet>
                            <h:outputText value="#{contatos.telefone}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Cidade"/>
                            </f:facet>
                            <h:outputText value="#{contatos.cidade}" />
                        </p:column>
           <p:column>
                            <f:facet name="header">
                                <h:outputText value="Excluir"/>
                            </f:facet>
            <p:commandLink value="Alterar" **update="panelAlterar"** onclick="alterar.show()" immediate="true" >
 <f:setPropertyActionListener target="#{contatosController.listaContatos}" value="#{contatos}" /> 
</p:commandLink>
 </p:column>
 </p:dataTable>
         
        </h:form>

 <h:form id="formAlterar">
                <p:dialog id="mudar" header="Alterar" widgetVar="alterar" modal="true">
                        <p:panelGrid id="panelAlterar" columns="2">
                                <h:outputText value="Nome:" />
                                <p:inputText value="#{contatosController.contatos.nome}" />
                                <h:outputText value="Email:" />
                                <p:inputText value="#{contatosController.contatos.email}" />
                                <h:outputText value="Telefone:" />
                                <p:inputText value="#{contatosController.contatos.telefone}" />
				<h:outputText value="Cidade:" />
                                <p:inputText value="#{contatosController.contatos.cidade}" />
                        </p:panelGrid>
                        <p:commandButton value="Alterar"
                                actionListener="#{contatosController.alterar}"
                                update="tabela:contatos"
                                oncomplete="alterar.hide()" />
                </p:dialog>
        </h:form>
    </h:body>
</html>

A minha intenção é pegar os dados da datatable e jogar no form quando for alterar. Mas aparece o seguinte erro

Cannot find component for expression "panelAlterar" referenced from "tabela:contatos:0:j_idt26"

já tentei

update="formAlterar"
update= "formAlterar:mudar"

sem sucesso

É provável que eu não esteja conseguindo mapear corretamente então peço encarecidamente ajuda com esse erro, ou sugestões pra conseguir alterar de uma maneira diferente

#2

Voce está tentando atualizar um componente que está dentro do form com o id “tabela”, tente usar update=“tabela:formAlterar”