Problems ReRendering a Table

Question

I am trying to rerender a table in response to a toggle switch change. My switch calls a Javascript function:

<input type="checkbox" id="chkPractice" onchange="flickSwitch()" />

The JS function looks like this:

function flickSwitch()
{
    // called when we click the switch on or off
    var OnOff = $("#chkPractice").val();
    alert("Switch: " + OnOff);  // on indicates practice TRUE
    CallSetPracticeFlag(OnOff);
}

I see the alert so I know this is being called when I click the switch. The JS calls an action function:

<apex:actionFunction name="CallSetPracticeFlag" action="{!setPracticeFlag}"  
       rerender="hoursRepeater" onComplete="alert('Set Flag');">
                <apex:param id="pFlag" name="Flag" value=""/>
</apex:actionFunction>

Once again, I know this is being called because I see the alert indicating that it has completed. I am trying to update a table on the page:

<apex:repeat value="{!available_hours}" var="h" id="hoursRepeater">
              <tr>
                <td><apex:outputField value="{!h.Day__c}" /></td>
                <td><apex:outputField value="{!h.Start_Time__c}"/></td>
                <td><apex:outputField value="{!h.End_Time__c}"/></td>
                <td><apex:outputField value="{!h.Appointment_Type_Name__c}"/></td>
              </tr>
 </apex:repeat>

But the repeater never reloads the data. What am I missing?

Answer 1

apex:repeat doesn't actually generate an ID within the the DOM structure, and so it cannot be directly targeted. You need to wrap that element within a parent element, and rerender that instead. You can use almost any sort of wrapper element, such as apex:outputText, apex:outputPanel, apex:form (but don't nest forms), apex:tab if you're using apex:tabPanel, and so on.

<apex:outputText id="hoursRepeater">
<apex:repeat value="{!available_hours}" var="h">
              <tr>
                <td><apex:outputField value="{!h.Day__c}" /></td>
                <td><apex:outputField value="{!h.Start_Time__c}"/></td>
                <td><apex:outputField value="{!h.End_Time__c}"/></td>
                <td><apex:outputField value="{!h.Appointment_Type_Name__c}"/></td>
              </tr>
 </apex:repeat>
</apex:outputText>