[RESOLVIDO]Ajax nao atualiza p:graphicImage

Front-end
#1

Boa noite, o ajax parece nao estar funcionando na minha pagina, tanto com f:ajax e p:ajax e nao sei mais o que fazer, por isso vim aqui.
view:

 <h:body>
        <div id="body"/> 
        <div id="transparencia"/>
       
        
        <div id="nav_auxiliar_clientes" onclick="deslocar_nav_button(1)" class="nav_auxiliar">
        <p:commandButton id="clientes_nav_button" styleClass="nav_button" value="Clientes" style="left:40px;">
            <div class="glare" style="left: 55px;"/>
        </p:commandButton>
</div>
            <div id="nav_auxiliar_imoveis" onclick="deslocar_nav_button(2)" class="nav_auxiliar" style="left:10px;">  
         <p:commandButton id="imoveis_nav_button" styleClass="nav_button" value="Imóveis" style="left:220px;">
             <div class="glare" style="left: 235px;"/>
        </p:commandButton>
</div>
             <div id="nav_auxiliar_funcionarios" onclick="deslocar_nav_button(3)" class="nav_auxiliar" style="left:20px;">
        <p:commandButton id="funcionarios_nav_button" styleClass="nav_button" value="Funcionários" style="left:400px;">
             <div class="glare" style="left: 415px;"/>
        </p:commandButton>
</div>
         
             <div id="menu_clientes">
                 <form>
                     <p:commandButton action="#{imobiliariaBean.clientecontrol.createCliente()}" id="add_clientes" value="Add Clientes"/>
                 <p:commandButton id="lista_clientes" value="Listar Clientes"/>
                 </form>
             </div>
            
            
            <div  id="painel_add_clientes">
                <form>
                    <span style="position: absolute; top:50px; left: 20px; color: white;">Nome</span>
                    <p:inputText  id="nome_cliente" styleClass="input_text" style="top:40px; left: 100px;" value="#{imobiliariaBean.clientecontrol.cliente.nome}">
                        <f:ajax event="keyup" execute="erro_nome" />  
                    </p:inputText>
                    
                      <p:graphicImage  rendered="#{imobiliariaBean.clientecontrol.cliente.nome=='joao'}" id="erro_nome" value="images/dialog_error.png"/>    
                    <span style="position: absolute; top:50px; left: 270px; color: white;">Nascimento</span>
                    <p:inputText id="nascimento_cliente" styleClass="input_text" style="top:40px; left: 350px;" value="#{imobiliariaBean.clientecontrol.cliente.nascimento}"/>
                 
                    <p:inputText  id="telefone_cliente" styleClass="input_text" style="top:90px; left: 100px;" value="#{imobiliariaBean.clientecontrol.cliente.telefone}"/>
                 
                    <p:inputText id="cpf_cliente" styleClass="input_text" style="top:90px; left: 350px;" value="#{imobiliariaBean.clientecontrol.cliente.cpf}"/>
                   
                    <p:inputText id="rg_cliente" styleClass="input_text" style="top:140px; left: 100px;" value="#{imobiliariaBean.clientecontrol.cliente.rg}"/>
                    
                    
                    
                    <p:autoComplete styleClass="rua_selector" value="#{imobiliariaBean.clientecontrol.cliente.endereco}"   
                    completeMethod="#{autoCompleteBean.complete}"/>  
                    
                    <p:autoComplete styleClass="cidade_selector" id="cidade_cliente" dropdown="true" value="#{imobiliariaBean.clientecontrol.cliente.cidade}"   
                    completeMethod="#{autoCompleteBean.complete}" />  
                    
                    <p:autoComplete styleClass="bairro_selector" id="bairro_cliente" dropdown="true" value="#{imobiliariaBean.clientecontrol.cliente.bairro}"   
                    completeMethod="#{autoCompleteBean.complete}" /> 
                       
                       
                       
                    <p:inputTextarea id="obs_cliente" value="#{imobiliariaBean.clientecontrol.cliente.obs}"/> 
                       
                       <div style="position: absolute; top: 70%;">
                           <p:commandButton action="#{imobiliariaBean.clientecontrol.addCliente(imobiliariaBean.clientecontrol.cliente)}" value="OK" style=" background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,184,229,1)), color-stop(68%,rgba(179,220,237,1)), color-stop(100%,rgba(188,224,238,1)));
-webkit-box-shadow: rgba(5, 170, 250, 0.5) 0px 10px 16px;"/>
           
</div>
                      
                </form>
            </div>
       
        <div id="c"/> 
        <div id="i"/>
        <div id="f"/>
        
   
        
    </h:body>

o que estou tentando fazer é atualizar o graphicImage de id=“erro_nome” quando o nome digitado no inputText de id=“nome_cliente” for igual a joao.
Observei que o nome do cliente no metodo imobiliariaBean.clientecontrol.cliente.nome nao é um valor nulo pois digito joao no inputtext e atualizo a pagina a imagem erro_nome aparece normalmente, nao sei porque o ajax nao esta funcionando, gostaria que a imagem aparecesse quando fosse digitado joao com um evento de keyUp como tentei fazer na view, mas nao da.
Alguem experiente pra dar uma dica? abraços e obrigado desde ja

#2

ah meu ninguem entende esse troço ai nao?
ajuda ai vey na moral

#3

Do i have to do anything all by myself?
de acordo com este artigo:
JS/Ajax will only update elements which are already present in the HTML DOM tree. JS basically does first a document.getElementById(clientId) to obtain the to-be-updated element and then replaces the whole node with the new node retrieved from ajax response. JS/Ajax can’t magically show/update elements which are never been rendered to the HTML output. You basically need to update a parent component which is always rendered and thus guaranteed to be present in the HTML DOM tree.

ele ta dizendo que elementos que nao foram renderizados desde o começo no html como o meu graphicimage id=“erro_nome” nao podem sofrer mudanças de JS/AJAX, seria necessario coloca-los dentro de um componente DOM que ja fosse renderizado pela pagina, ai pesquisei os muitos componentes do primefaces e descobri que o <p:outputpanel layout:block/> é invisivel aos olhos do usuario mas pode perfeitamente sofrer mudanças via ajax e foi o que eu fiz: coloquei meu graphic image dentro do outputpanel e deu certo ajax esta funcionando.
Emnbora eu nao esteja satisfeito com a comunidade pois ja é o 3° problema dificil que eu tive que resolver sozinho vim aqui postar a soluçao pois como disse previamente somos uma comunidade e sei que pelo menos minha parte estarei fazendo, e acredito que esta descoberta é de grande utilidade para quem vem tendo problemas ao renderizar componentes via ajax, entao façam bom uso da informaçao, Abraços a todos e bom fim de semana

#4

Cara muito obrigado pelo help, estava na mesma situação, porem usei o <p:panel> e não <p:outputpanel/>,
quanto as respostas já estou acostumado com isso no primefaces, por ser ainda digamos “novo”, não são todos que sabem, maioria das vezes recorro ao sites gringos, apesar que a grande parte dos meus problemas acho a solução sozinho, as vezes com pistas que encontro nos sites por ai, se precisar de ajuda chama ai, já me virei com muito erro doido neste Framework hehehe

#5