Using apex:outputPanel within apex:repeat

Question

I'm working on the following problem; I have an <apex:repeat> element which contains a <tr>. In some cells of the row I have an <apex:outputPanel> element. If the page is rendered this results in a table with multiple rows. In each row some of the columns contain an outputPanel. Is there a way to rerender a single row's outputPanel? Or as an alternative; rerender a single row from the repeater? In my current solution every outputPanel is rerendered, but I get some quirky results.

My VF code looks like this:

<table>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Added</th>
    </tr>
    <apex:repeat value={!people} var="person">
        <tr>
            <td><apex:inputCheckbox value="{!person.added}" onchange="addOrRemove('{!person.Id}'); /></td>
            <td>{!person.Name}</td>
            <td><apex:outputPanel id="personAddedPanel" rendered={!person.added}>Yes</apex:outputPanel></td>
        </tr>
    </apex:repeat>
</table>

<apex:actionFunction name="addOrRemove" action="{!addOrRemove}" rerender="personAddedPanel">
    <apex:param name="firstParam" assignTo="{!curPersonId}" value="" />
</apex:actionFunction>

the addOrRemove is an actionFunction that toggles the added boolean on the person and after that rerenders the outputPanel personAddedPanel.

Answer 1

Visualforce generates unique DOM ids and, in your case, a different one for each row in the repeat. The ActionFunction (outside the repeat) does not know which row id to rerender.

Try using an apex:ActionSupport from within the apex:inputCheckbox. Called from here (within the loop), rerender will work correctly.

Answer 2

The primary issue appears to be with where you've located your repeat code. You also had an unclosed tag which I've noted in the code below. Try this, it should keep everything within the same table row:

<table>
<tr>
    <th></th>
    <th>Name</th>
    <th>Added</th>
</tr>

    <tr>
     <apex:repeat value={!people} var="person">
        <td><apex:inputCheckbox value="{!person.added}" onchange="addOrRemove('{!person.Id}'); /></td>// <-- This TD wasn't closed
        <td>{!person.Name}</td>
        <td><apex:outputPanel id="personAddedPanel" rendered={!person.added}>Yes</apex:outputPanel></td>
    </apex:repeat>
    </tr>

Your rerender problems may be related to not having specified a percentage of space or width in pixels for each column. If you know how wide the outputPanel is, then adding a width= "xxpx", plus some room for border space, might solve some of your problems. Right now, the browser is free to choose how to allocate how much real estate to give each column. If you tell it to give a certain percentage of space to each one (you can vary it as the checkbox will be small), that in itself will help a great deal.

Answer 3

Name Added

<tr>
 <apex:repeat value={!people} var="person">
    <td><apex:inputCheckbox value="{!person.added}" onchange="addOrRemove('{!person.Id}'); /></td>// <-- This TD wasn't closed
    <td>{!person.Name}</td>
    <td><apex:outputPanel id="personAddedPanel" rendered={!person.added}>Yes</apex:outputPanel></td>
</apex:repeat>
</tr>

Instead apex:outputPanel tag just used this code it will work..

<apex:outputText value="Yes" rendered="{!person.added}" /> in td tag

Thanks