a4j:commandButton reRendering rich:datatable

Question

My issue is that I am trying to have a column in my datatable show an outputtext by default, and replace that with an inputtext when the commandbutton is pressed. Have not found a solution. First post by the way.

I have an a4j:commandButton that I am looking to reRender this part of my dataTable

<a4j:commandButton reRender="yieldTable" action="#{yieldSearch.activateVisible()}"
id="modify" styleClass="editLargeIcon" value="Modify">
</a4j:commandButton>

<rich:dataTable id="yieldTable" value="#{yieldSearch.yfitem.yielditem}" var="_yield">
<rich:column>
<f:facet name="header">%-YLD</f:facet>
<h:outputText value="#{_yield.yfYield}" rendered="#{not yieldSearch.visible}">
</h:outputText>
<h:inputText rendered="#{yieldSearch.visible}" />
</rich:column>

And I would like activate this method (just shows relevant code)

@Name("yieldSearch")
@Scope(ScopeType.CONVERSATION)
public class YieldSearch implements Serializable{

private Boolean visible;

public void activateVisible(){
    this.setVisible(true);
    System.out.print(true);
}

    public void setVisible(Boolean visible) {
    this.visible = visible;
}

public Boolean getVisible() {
    return visible;
}

Any help much appreciated.

Answer 1

You need to wrap both components in an <a4j:outputPanel id="myPanel" ajaxRendered="true"/>. The reason both components are failing to be reRendered is that the component you've set torendered="false" will not be sent to the browser on initial view rendering.

<a4j:outputPanel id="myPanel" ajaxRendered="true">
<h:outputText value="#{_yield.yfYield}" rendered="#{not yieldSearch.visible}"/>
<h:inputText rendered="#{yieldSearch.visible}" />
</a4j:outputPanel>

The way ajax refreshes work is by using javascript to locate a clientId in the DOM tree to update with new markup, i.e. the component must already be in the DOM tree. Since you've set the rendered="false", the component was never in the DOM tree to start with. So on an ajax request, the browser doesn't know what you're talking about because it can't find the clientId to update.

Using the outputPanel with ajaxRendered="true", you're refreshing the entire outputPanel, so the ajax refresh will update that component as a whole, with whatever you've nested within it