1

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?

1 Answer 1

2

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>
2
  • Thanks much. I did as you suggested, and also fixed another bug I found. I was evaluating checked/unchecked for my checkbox using the .val() function which is incorrect. I changed the JS Function to use .is(":checked"); instead which works. I see via System.Debug statements that my controller function to refresh the data is being called and returning the correct number of records. But the page itself does not update; it still shows the old data. So it appears I am still missing something. Apr 5, 2017 at 3:03
  • Problem solved: wrapped the entire table (not just the repeater) in an <apex:OutputPanel> and this resolved the issue, it's updating just fine now. Apr 5, 2017 at 3:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .