Unable to locate plain HTML element from <f:ajax render=“…”>

Question

I have table that display equipments. There is a button below to enter page number for pagination. when click on that button ajax call updates the tableId table. But I have an error <f:ajax> contains an unknown id 'tableId'

Can't I refer table ID from ajax update? if not what is the solution? I cannot use datatable as I need to manupulate the column headings at runtime.

<table id="tableId">
    <tr>
        <td>
            <h:commandLink ...>
                <f:ajax render="tableId" />
            </h:commandLink>  
        </td>
    </tr>
</table>

Answer 1

The <f:ajax render> (and <f:ajax execute> ) has to refer a fullworthy JSF component, not a plain HTML element. JSF will namely pass the specified ID to UIComponent#findComponent() in order to find in the component tree the component responsible for producing the desired piece of HTML output. A plain HTML element is not interpreted as a true JSF component and therefore not present by its ID in the JSF component tree.

Either make it a true JSF component,

<h:panelGrid id="tableId" columns="1">
    <h:commandLink ...>
        <f:ajax render="tableId" />
    </h:commandLink>
</h:panelGrid>  

or wrap it in a true JSF component and reference it instead.

<h:panelGroup id="tableIdWrapper" layout="block">
    <table id="tableId">
        <tr>
            <td>
                <h:commandLink ...>
                    <f:ajax render="tableIdWrapper" />
                </h:commandLink>  
            </td>
        </tr>
    </table>
</h:panelGroup>