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.

Answer 1

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 ..."