Ajax在jsf视图中不起作用

Question

In a JSF Primefaces / PrimefacesExtension app, i have some ajax misbehaviour.

There is a section of the view, only shown when a condition is true:

<h:form id="membership" rendered="#{empty registerVisitBean.partner.activeMembership.payDate}">

Inside, there are 2 grids: first one with red text and a button to make action (pay a membership), this first grid will dissapear when action done, and a second one will be shown:

    <p:panelGrid id="not_paid" layout="grid" columns="2" rendered="#{!registerVisitBean.paid}">
        <h:outputText value="No pagada" styleClass="data-text red"  />
        <p:commandButton value="Pagar" actionListener="#{registerVisitBean.payMembership}" update="paid,not_paid" />
    </p:panelGrid>

    <p:panelGrid id="paid" layout="grid" columns="1" rendered="#{registerVisitBean.paid}">
        <h:outputText value="#{registerVisitBean.partner.activeMembership.payDate}" styleClass="data-text" />
    </p:panelGrid>

The view is quite long, but other parts have independent forms and are not important here... The <form> tag is NOT nested inside other <form> but it is in other <p:panelGrid> , but not a problem i think, this is happening in same view to change the color of an element after making action and works perfect:

<h:form id="notes">
<p:panelGrid id="partner_notes" layout="grid" columns="1" >
    <p:inputTextarea value="#{registerVisitBean.partnerNotes}" id="notes" rows="2" autoResize="false" styleClass="#{registerVisitBean.saved ? 'full-width unresizable success' : 'full-width unresizable'}" style="padding: 0"></p:inputTextarea>
    <p:commandButton value="Guardar Notes" actionListener="#{registerVisitBean.updateNotes}" styleClass="full-width" update=":notes:partner_notes"/>
</p:panelGrid>
</h:form>

I think problem is in the update part of the <p:commandButton> but i've tried several ways without succeed.

NOTE: bean code is being executed:

private boolean paid; 
// ( getter / setter)

public void payMembership(){
    MembershipDto membership =  partner.getActiveMembership();
    membership.setPayDate(new Date());
    membership.setMember(partner);
    membership = partnerManagementFacade.updateMembership(membership);
    if (membership != null){
        System.err.println("Paid > " + membership.getPayDate());
        paid = true;
    }
}

With java code there is no problem, debugging shows all goes correct, but after the view is not refreshed.

EDIT1: according to @stg answer, i tried unsuccesfully:

<p:outputPanel id="container">
<p:panelGrid id="not_paid" layout="grid" columns="2" rendered="#{!registerVisitBean.paid}">
    <h:outputText value="No pagada" styleClass="data-text red"  />
    <p:commandButton value="Pagar" actionListener="#{registerVisitBean.payMembership}" update="container" />
</p:panelGrid>

<p:panelGrid id="paid" layout="grid" columns="1" rendered="#{registerVisitBean.paid}">
    <h:outputText value="#{registerVisitBean.partner.activeMembership.payDate}" styleClass="data-text" />
</p:panelGrid>

As his answer says:

You can not update a component, that has not been rendered previously, because it is "just not there"!

I think with his code, the problem will persist (second panel grid is not being rendered first time, so I cannot update update it cause it doesn't exists.

Trying to avoid this problem i decided to update the <p:outputText> and remove the <p:commandButton> from the view:

<h:form id="membership">
    <h:panelGroup id="not_paid" layout="block" rendered="#{empty registerVisitBean.partner.activeMembership.payDate}">
        <h:outputText value="#{registerVisitBean.paid ? registerVisitBean.partner.activeMembership.payDate : 'No pagada'}" styleClass="data-text red"  />
        <p:commandButton value="Pagar" actionListener="#{registerVisitBean.payMembership}" update="not_paid,@this" rendered="#{!registerVisitBean.paid}"/>
    </h:panelGroup>
</h:form>

Instead of expected... this is not working either. :'(

Any ideas?

Answer 1

You can not repaint a wall you never built!

Here: You can not update a component, that has not been rendered previously, because it is "just not there"!

What you may do is nest your panelgrid in a surrounding outputpanel and update this outputpanel instead of the grids:

<p:outputPanel id="container">
    <p:panelGrid id="not_paid" layout="grid" columns="2" rendered="#{!registerVisitBean.paid}">
        <h:outputText value="No pagada" styleClass="data-text red"  />
        <p:commandButton value="Pagar" actionListener="#{registerVisitBean.payMembership}" update="container" />
    </p:panelGrid>

    <p:panelGrid id="paid" layout="grid" columns="1" rendered="#{registerVisitBean.paid}">
        <h:outputText value="#{registerVisitBean.partner.activeMembership.payDate}" styleClass="data-text" />
    </p:panelGrid>
</p:outputPanel>