Visualforce: Dynamically ReRender a row within <apex:repeat> by passing $Component through controller

Question

I have a typical form with <apex:repeat> for some fields. The <apex:inputText> elements have an onChange attribute that references a script that then calls an <apex:actionFunction>, for example:

Repeat Fields:

<apex:repeat value="{!myList}" var="i">
    <apex:outputPanel id="rowOfMyList" styleClass="row field-row" layout="block">
        <apex:inputText id="inputId" value="{!i.obj.value}" html-data-index="{!i.obj.index}" html-data-render="{!$Component.rowOfMyList}" onChange="updateField(this)"/>
    </apex:outputPanel>
</apex:repeat>

JS Script:

function updateField(row) {
    myActionFunction(row.getAttribute('data-index'), row.value, row.getAttribute('data-render'));
}

Action Function:

<apex:actionFunction action="{!pageRefMethod}" name="myActionFunction" rerender="{!renderRow}" >
    <apex:param name="index" value=""/>
    <apex:param name="goal" value=""/>
    <apex:param name="render" assignTo="{!renderRow}" value=""/>
</apex:actionFunction>

When I debug my controller I get exactly what I would expect, the dynamic Id selector that salesforce puts on my managed <apex:outputPanel>. I even then take that debug and run a search on the html source code and get an exact match on the element I expected to rerender. Unfortunately it does not rerender.

If I concatenate another ID from outside of the repeat tag to my html-data-render attribute it too gets passed through to my rerender="{!renderRow}" and it does rerender

Any thoughts on this would be awesome!

Answer 1

Through attempting this same problem on another project I was able to get a fresh look at the issue. What I learned through countless testing is that rerender attribute can be very tricky. For example:

• As many already know, if you do not provided the rerender attribute in your actionFunction then your parameters will not be sent.
• Rerender cannot be a dynamic value, meaning that EVEN IF you statically put the visualforce rendered ID (i.e. j_id0:j_id38), it will not rerender
• Rerender cannot be bound to a controller instance variable. Along the lines of the previous statement, besides the trickyness of dynamically binding a component ID to a variable, even if you do it would not rerender

What it comes down to is, in order to provide a dynamic component Id to the rerender attribute you must use the $Component variable to dot notate through your ID.

Here is a barebones look at what I mean within the context of the OP:

Visualforce Repeat Fields:

<apex:repeat id="myRepeater" value="{!myList}" var="i">
    <apex:outputPanel id="myRow" layout="block">
        <apex:inputText id="inputId" value="{!i.obj.value}" html-data-index="{!i.obj.index}" html-data-render="" onChange="updateField(this)"/>
    </apex:outputPanel>
</apex:repeat>

NOTE: Added an ID to the repeat tag, AND remove the html-data-render attribute since there is no use attempting to dynamically PASS the component ID

Visualforce JS Script:

function updateField(row) {
    myActionFunction(row.getAttribute('data-index'), row.value);
}

Visualforce ActionFunction:

<apex:actionFunction action="{!pageRefMethod}" name="myActionFunction" rerender="{!$Component.myRepeater.myRow}" >
    <apex:param name="index" value=""/>
    <apex:param name="goal" value=""/>
</apex:actionFunction>

Notice that rather than PASSING the specific row ID through some html pass-through attribute, I instead call the ID within rerender attribute directly.

Now don't believe this ONLY rerenders my "affected/selected" row, pretty sure all rows that fall within that Component ID selector are being rerendered (I can't even tell), BUT on the plus side it only rerenders the rows themselves and not the container, which to the user makes no difference (considering there is no flickering or visual glitch). Really the best part is, it WORKS!