Apex Code Development You need to sign in to do that
Don't have an account?
Alexander Yhap Visualforce/SLDS - commandLink NOT rerendering outputPanel
I'm trying to rerender an outputPanel when I click a apex:commandLink.
The status on commadLink gets triggered. & the save() method gets called in the controller (seen in developer console) but the outputPanel does not rerender.
commandLink
outputPanel
HELP ME PLEASE! I've been stuck on this for hours!!!!
I can offer full code, if necessary.
Visualforce
Controller
The status on commadLink gets triggered. & the save() method gets called in the controller (seen in developer console) but the outputPanel does not rerender.
commandLink
<apex:commandLink id="addRoleButton" action="{!save}" value="Add Role" reRender="roleCreationForm" status="refreshstatus" styleclass="slds-button slds-button--neutral slds-col--bump-left" tabindex="99" />
outputPanel
<apex:outputPanel id="rolePanel" rendered="{!RoleList.size!=0}">
HELP ME PLEASE! I've been stuck on this for hours!!!!
I can offer full code, if necessary.
Visualforce
<apex:form id="roleCreationForm" styleclass="roleCreationForm" html-novalidate="novalidate">
<apex:actionFunction name="rerenderRoleTable" rerender="roleCreationForm" status="refreshstatus"/>
<!-- <button class="slds-button slds-button--neutral slds-col--bump-left">Add</button> -->
<!-- <apex:commandButton value="Add Role" id="addRoleButton" styleclass="slds-button slds-button--neutral slds-col--bump-left" tabindex="99" >
<apex:actionSupport event="onclick" action="{!save}" rerender="rolePanel" status="refreshstatus"/>
</apex:commandButton> -->
<!-- <apex:commandbutton action="{!save}" reRender="roleCard" value="Add Role" id="addRoleButton" styleclass="slds-button slds-button--neutral slds-col--bump-left" tabindex="99" /> -->
<apex:commandLink id="addRoleButton" action="{!save}" value="Add Role" reRender="roleCreationForm" status="refreshstatus" styleclass="slds-button slds-button--neutral slds-col--bump-left" tabindex="99" />
<apex:outputPanel id="emptyRoleTable" rendered="{!RoleList.size==0}">
<table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
<thead>
<tr class="slds-text-heading--label">
<th class="slds-text-heading--label slds-size--3-of-12" scope="col">Name</th>
<th class="slds-text-heading--label slds-size--1-of-12" scope="col">Positions</th>
<th class="slds-text-heading--label slds-size--3-of-12" scope="col">Template</th>
<th class="slds-text-heading--label slds-size--4-of-12" scope="col">Locale</th>
<th class="slds-text-heading--label slds-size--1-of-12" scope="col">Days/Options</th>
<th class="row-action slds-cell-shrink" scope="col"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</apex:outputPanel>
<apex:actionStatus id="refreshstatus" startstyle="color:green; text-align:center;" startText="Adding...."></apex:actionStatus>
<apex:outputPanel id="rolePanel" rendered="{!RoleList.size!=0}">
<table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
<thead>
<tr class="slds-text-heading--label">
<th class="slds-text-heading--label slds-size--3-of-12" scope="col">Name</th>
<th class="slds-text-heading--label slds-size--1-of-12" scope="col">Positions</th>
<th class="slds-text-heading--label slds-size--3-of-12" scope="col">Template</th>
<th class="slds-text-heading--label slds-size--4-of-12" scope="col">Locale</th>
<th class="slds-text-heading--label slds-size--1-of-12" scope="col">Days/Options</th>
<th class="row-action slds-cell-shrink" scope="col"></th>
</tr>
</thead>
<tbody>
<apex:repeat id="roleRepeat" value="{!RoleList}" var="role">
<tr class="slds-hint-parent">
<td class="slds-size--3-of-12" data-label="Name">
<div class="slds-text-body--regular">{!role.roleName}</div>
</td>
<td class="slds-size--1-of-12" data-label="Positions">
<div class="slds-text-body--regular">{!role.numberOfPositions}</div>
</td>
<td class="slds-size--3-of-12" data-label="Role Template">
<div class="slds-text-body--regular">{!role.roleTemplateName}</div>
</td>
<td class="slds-size--4-of-12" data-label="Role Locale">
<div class="slds-text-body--regular">{!role.roleLocaleSelected}</div>
</td>
<td class="slds-size--1-of-12 slds-text-align--center" data-label="Days/Options">
<div class="slds-text-body--regular">
<apex:repeat value="{!role.checkDays}" var="day">
{!IF(day.isChecked, day.day , "")}
</apex:repeat>
</div>
</td>
<td class="slds-cell-shrink" data-label="Actions">
<button class="slds-button slds-button--icon-border slds-button--icon-x-small" type="button" data-aljs="modal" data-aljs-show="modal-1">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS202, '/assets/icons/utility-sprite/svg/symbols.svg#settings')}"></use>
</svg>
<span class="slds-assistive-text">Days/Options</span>
</button>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:outputPanel>
Controller
public RecurringRoleCreation2Controller() {
RoleList = new List<role>();
}
public void save() {
role r = new role(roleName, roleLocaleSelected, roleTemplateID, numberOfPositions, isRestoreVolunteer, isCrewLeader, isPhotographer, isGroup, assignDaysToList());
RoleList.add( r );
}
You will need another wrapper outputpanel to make sure the rendering goes oke. The trick is that you need to rerender a container so that whatever is inside it gets rerendered.
<apex:outputPanel id="rolePanel"> <apex:outputPanel rendered="{!RoleList.size!=0}"> </apex:outputPanel> </apex:outputPanel>Hope this helps!
Best regards,
Martijn Schwärzer
Ps. If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.