Use Ajax to update only ui:repeat instead of all form

Question

I have some problem with the rendering of some data in my application. To make it simple, I have a h:form that contains a table with a ui:repeat in the tbody. Let's make an exemple (I did not put all code, because it would be far too long) :

<h:form id="sequence-assemblage-form">
    <ui:fragment>
        <table id="table-fils">
            <thead>
                ...
            </thead>
            <tbody>
                <ui:repeat id="fil">
                    <tr>
                        many <td> one after another
                        <ui:fragment>
                            <td>
                                <h:panelGroup id="actionsEditing" rendered="">
                                                        <h:inputHidden id="filHarnaisId" value="#{fil.id}"/>

                                                        <h:commandLink styleClass="icon-20 icon-save" id="save">
                                                            <f:ajax execute="@form" render="" listener="doesAnAction"/>
                                                            <f:ajax execute="@form" render="@form" listener="doesAnotherAction"/>
                                                            <f:ajax execute="@form" render=":integrite-form :message-integrite-panel" onevent="verifierIntegrite"/>
                                                        </h:commandLink>
                                                        <h:commandLink styleClass="icon-20 icon-rollback" id="rollback" action="">
                                                            <f:ajax execute="@this" render="@form" />
                                                        </h:commandLink>
                                                    </h:panelGroup>
                            </td>
                        </ui:fragment>
                    </tr>
                </ui:repeat>
            </tbody>
        </table>
    </ui:fragment>
</h:form>

My problem is that every time I save, it render the form completly, which cause performance problems when my table contains many rows (you know, when a page took like 10 seconds of more to load everytime you save?). Is there a way to do so it will only render the row I am currently editing?

I do not know if the problem is with the f:ajax execute or f:ajax render but I need to figure out where the problem is and find a solution for performance.

Have a nice day Thanks !

EDIT : I have noticed while trying to find a solution that one of the listeners change a value in my bean and that this value is required to render a script important to trigger the save (see below)

<h:outputScript rendered="#{fil.modifie}">
    showNoticeChangementDialog();
</h:outputScript>

These lines of code are right before the end of my ui:repeat which means that by updating only the ui:repeat, it should be triggering the dialog if my value has been modified ?

I tried to change both the render and execute with the id of my ui:repeat but it was not working.

Why do you multiple <f:ajax> within a single <h:commandLink>? There is no point in using them in the example given. Use only one <f:ajax> per <h:commandLink> and enlist required components to be updated in render. — Tiny
@Kukeltje : It is related because i need the "refresh" to be done only on one row of my table, not the complete form (for performance issue like say in my post). The ui:repeat here refer to each row that are generated, or am i wrong ? — Kaptin
@Tiny : I did not paste all the code because it would have been too long, but it has been done this way when the application was created. I have removed most of what was written in listeners and many others components to simplify and prevent to put too much information. In the original, there is something different written in the listener of every f:ajax. — Kaptin
One of them renders @form will keep rendering the form every time the link is clicked according to the example. — Tiny

Kaptin Kaptin · Accepted Answer · 2015-10-19T12:10:32

I managed to find a workaround with the help of a colleague and this particular answer.

Had to wrap the content of every <td> within a h:panelGroup and give them a unique id. I could then use the render on every element to make sure they have been updated.

It looks like this : <f:ajax render="id1 id2 id3 id4 ..."

Use Ajax to update only ui:repeat instead of all form

1 Answers