[SalesForce] Rerender when calling a method from an inputCheckbox

I currently have a pageBlockTable that I am populating using a StandardSetController. The first row of this column is checkboxes that allow the user to select the object for that particular row. Currently I am able to select checkboxes and then press a button at the bottom of the page which shows the ID of all the objects that have been selected. I want to have the ID populate as soon as I check the box and re-render the section under the pageblocktable to show the ID of the selected object.

here are the apex action functions I defined

<apex:actionFunction name="aSelectItem" action="{!selectItem}" rerender="selectedArticlesDisplayBox">
    <apex:param name="contextItem" value="" assignTo="{!contextItem}"/>
</apex:actionFunction>
<apex:actionFunction name="aDeselectItem" action="{!deSelectItem}" rerender="selectedArticlesDisplayBox">
    <apex:param name="contextItem" value="" assignTo="{!contextItem}"/>
</apex:actionFunction>
<apex:actionFunction name="reRenderSelected" rerender="selectedArticlesDisplayBox"/>

here is the column with the apex:inputCheckbox:

<apex:column headerValue="Selected" width="10%">
    <apex:inputCheckbox onclick="doCheckboxChange(this,'{!article.id}')"/>
</apex:column>

The javascript method being called when the checkbox is clicked:

function doCheckboxChange(checkbox,itemId){
    if(checkbox.checked==true){
          aSelectItem(itemId);
    }
    else{
     aDeselectItem(itemId);
    }
     reRenderSelected();
}

This is the div section that I am wanting to display the values in:

<div id="selectedArticlesDisplayBox">
  <apex:pageBlockSection title="Selected Articles">
    <apex:repeat value="{!selectedArticleID}" var="article" id="selectedArticleDisplayArea">
        <apex:outputText value="{!article}" />
        <br/>
    </apex:repeat>
    <apex:outputText value="Number of selected: {!selectedCount}" />
  </apex:pageBlockSection>
</div>

The apex controller methods that are being called:

public void selectItem(){
    this.selectedArticleID.add(this.contextItem);
}
public void deSelectItem(){
    this.selectedArticleID.remove(this.contextItem);
}

I am not sure exactly where I am going wrong and any help would be appreciated. I know that the set is being added to/removed correctly but it is not until I hit a button on the page that displays an alert and the page reloads do I see the correct value being shown.

Best Answer

The issue is that you're using a <div>, and so the ID isn't being manipulated on render and won't match what's expected by the action functions when they trigger the re-render functionality.

Replace your <div> with an <apex:outputPanel> and hopefully you'll be good to go!

<apex:outputPanel id="selectedArticlesDisplayBox">
  <apex:pageBlockSection title="Selected Articles">
    <apex:repeat value="{!selectedArticleID}" var="article" id="selectedArticleDisplayArea">
        <apex:outputText value="{!article}" />
        <br/>
    </apex:repeat>
    <apex:outputText value="Number of selected: {!selectedCount}" />
  </apex:pageBlockSection>
</apex:outputPanel>