[SalesForce] reRender Outputpanel is not working

VF Page:

<apex:page sidebar="false" docType="html-5.0" controller="assignStudentsFinal1">   
        <apex:form >
           <div class="slds-button-group" role="group">
                <apex:commandButton id="filter" styleclass="btn btn-primary" value="Go" action="{!getEngagements}" reRender="datePanelContainer,studentTable"/>                 
           </div>
           <apex:outputpanel id="studentTable" rendered="{!itFailed}" >
                 <apex:outputPanel id="datePanelContainer" rendered="{!itFailed}" >
                       This is for testing
                  </apex:outputPanel>
           </apex:outputPanel>
        </apex:form>
  </apex:page>

Class:

public class assignStudentsFinal1 {

 public boolean itFailed  {get;set;}

 public assignStudentsFinal1 ()
 {
    itFailed = false; 
 } 

 public void getEngagements(){
     itFailed  =true;    
 }

Issue:
On click of command button, output panel is not reRendering. I know I am doing a silly mistake which I am unable to find out.

Updated Actual VF:

 <div class="slds-button-group" role="group">
                  <apex:commandButton id="filter" styleclass="btn btn-primary" value="Go" action="{!getEngagements}" reRender="studentTable"/> 
                  <apex:commandButton styleclass="btn btn-primary" value="Update Records" action="{!updateEngagements}" rerender="myForm,thePanelWrapper" status="statusSaveTrip"  />  

              </div>             

      </form>
      <br/>
        <apex:outputpanel id="studentTable">
            <apex:outputPanel id="datePanelContainer" rendered="{!wrapList.size != 0}">
            <table class="slds-table slds-table--bordered slds-table--fixed-layout" role="grid">
              <thead>
                <tr class="slds-text-title--caps">
                  <th class="slds-cell-shrink" scope="col">
                    <label class="slds-checkbox">
                      <input type="checkbox" name="options" onchange="selectAllCheckboxes(this,'inputId')" />
                      <span class="slds-checkbox--faux"></span>
                      <span class="slds-assistive-text">Select All</span>
                    </label>
                  </th>
                  <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Opportunity Name">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                      <span class="slds-assistive-text">Sort </span>
                      <span class="slds-truncate" title="Opportunity Name">Student Engagement</span>
                      <div class="slds-icon_container">
                        <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
                          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                        </svg>
                      </div>
                      <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                    <div class="slds-resizable">
                      <label for="cell-resize-handle-203" class="slds-assistive-text">Opportunity Name column width</label>
                      <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-203" />
                      <span class="slds-resizable__handle">
                        <span class="slds-resizable__divider"></span>
                      </span>
                    </div>
                  </th>
                  <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Account Name">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                      <span class="slds-assistive-text">Sort </span>
                      <span class="slds-truncate" title="Account Name">Learning Community</span>
                      <div class="slds-icon_container">
                        <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
                          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                        </svg>
                      </div>
                      <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                    <div class="slds-resizable">
                      <label for="cell-resize-handle-204" class="slds-assistive-text">Account Name column width</label>
                      <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-204" />
                      <span class="slds-resizable__handle">
                        <span class="slds-resizable__divider"></span>
                      </span>
                    </div>
                  </th>
                  <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Close Date">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                      <span class="slds-assistive-text">Sort </span>
                      <span class="slds-truncate" title="Close Date">Current Track</span>
                      <div class="slds-icon_container">
                        <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
                          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                        </svg>
                      </div>
                      <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                    <div class="slds-resizable">
                      <label for="cell-resize-handle-205" class="slds-assistive-text">Close Date column width</label>
                      <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-205" />
                      <span class="slds-resizable__handle">
                        <span class="slds-resizable__divider"></span>
                      </span>
                    </div>
                  </th>
                  <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Stage">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                      <span class="slds-assistive-text">Sort </span>
                      <span class="slds-truncate" title="Stage">New Track</span>
                      <div class="slds-icon_container">
                        <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
                          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                        </svg>
                      </div>
                      <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                    <div class="slds-resizable">
                      <label for="cell-resize-handle-206" class="slds-assistive-text">Stage column width</label>
                      <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-206" />
                      <span class="slds-resizable__handle">
                        <span class="slds-resizable__divider"></span>
                      </span>
                    </div>
                  </th>

                  <th class="slds-cell-shrink" scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <apex:repeat value="{!wrapList}" var="e">  
                    <tr class="slds-hint-parent">
                      <td role="gridcell" class="slds-cell-shrink" data-label="Select row Engagement">
                        <label class="slds-checkbox">                          
                          <apex:inputCheckbox value="{!e.selected}" id="inputId"/>          
                          <span class="slds-checkbox--faux"></span>
                          <span class="slds-assistive-text">Select row Engagement</span>
                        </label>
                      </td>         
                      <td role="gridcell" data-label="Account Name">
                        <div class="slds-truncate" title="Cloudhub"><apex:outputText value="{!e.eng.name}" /></div>
                      </td>  
                      <td>
                        <apex:selectList styleclass="slds-input" value="{!e.selectedLC}" size="1" id="lcoption">                                                                              
                              <apex:selectOptions value="{!e.selectedCLC}"/> 
                                    <apex:param value="{!e.rowcount}" assignTo="{!count}" name="count"/> 
                        </apex:selectList>
                      </td>   
                      <td><apex:outputText value="{!e.selectedNTrack}" id="track" /></td>  
                      <td> 
                         <apex:selectList styleclass="slds-input" id="trackv" value="{!e.selectedNTrack}" size="1">                                                                           
                               <apex:selectOptions value="{!e.selectedTrack}"/>
                                     <apex:actionSupport event="onchange" action="{!refreshPage}" rerender="track" > 
                                           <apex:param value="{!e.rowcount}" assignTo="{!count}" name="count"/>
                               </apex:actionSupport>                                                                            
                         </apex:selectList>
                      </td>    
                    </tr>  
                 </apex:repeat>
              </tbody>
            </table>
            </apex:outputPanel>
        </apex:outputPanel>

Actual method in Class:

public void getEngagements(){
     //lcOptionslist();
      if(wrapList!=null)
     wrapList.clear();    
     integer i=0;       
     wrapList = new list<WrapperClass>();        
     String Query= 'SELECT id, Name, Site__c,Track_Assignment__c,Sample__c, Learning_Community__c,Cohort__c,Learning_Community__r.Name FROM Engagement__c WHERE (Cohort__c=:selectedCohort AND Site__c=:selectedSite)';        
        if(assignUassign=='Unassigned'){            
            Query += ' AND Learning_Community__c=null';  
        }else if(assignUassign=='Assigned'){            
            Query += ' AND Learning_Community__c!=null';  
            System.debug('Query '+Query );
        }

     for(Engagement__c eng : Database.query(Query)){  
            if(eng.Learning_Community__c==null){            
                wrapList.add(new WrapperClass(eng,trackOptions,'--None--',Lcoptions,'--Unassigned--',i,getTrackspecialities(eng.id))); 
                System.debug('wrapList '+wrapList);           
            } else{            
                wrapList.add(new WrapperClass(eng,trackOptions,eng.Track_Assignment__c,Lcoptions,eng.Learning_Community__c,i,getTrackspecialities(eng.id)));   
            }           
            i++;
        } 
 }

Regards,
Ajay

Best Answer

Whenever we try to refresh a outputPanel or div through the reRender, that OutputPanel must be available on the page.

In the case, itFailed is false during page load. So the studentTable panel is not rendered.

Corrected code is below:

So, remove rendered="{!itFailed}" from the studentTable to make it workable.

      <div class="slds-button-group" role="group">
            <apex:commandButton id="filter" styleclass="btn btn-primary" value="Go" action="{!getEngagements}" reRender="datePanelContainer,studentTable"/>                 
       </div>
       <apex:outputpanel id="studentTable">
             <apex:outputPanel id="datePanelContainer" rendered="{!itFailed}" >
                   This is for testing
              </apex:outputPanel>
       </apex:outputPanel>

Update

To stop full page refresh, you have to use actionFunction in conjunction with CommandButton click event

<apex:commandButton id="filter" styleclass="btn btn-primary" value="Go"  onclick="doFilterCheck();return false;"/> 

<apex:actionFunction name="actionDoCheck" action="{!getEngagements}"  rerender="studentTable"/>

write a small javascript to call this actionFunction

Related Topic