Requirement : On a vf page i have a button and on clicking the button the composer and publisher values from the song are updated to the UI . However does updated values are not reflecting until i manually refresh the page . I am unable to get the rerender work.

here is the songblock code

           <apex:pageBlockButtons id="songButton">
                 <apex:commandButton id="addSong" reRender="o1Block" status="counterStatus" oncomplete="reorganize({!warpObject.size});"  value="Add Song" onclick="hideSaveButton();" action="{!addNewRowToSongList}"  rendered="{!IF(((case.Status=='New')||(case.Status=='In Progress')||(case.Status=='Resubmit for Verification')||checkUser)&&(Songs.size==0),True,False)}">
                 <apex:param id="segmentId1" name="segmentId1" value="{!segment.Id}"/>
                    <apex:dynamicComponent componentValue="{!myCommandButtons}"/>       
            <apex:outputpanel rendered="{!IF((case.Status=='New')||(case.Status=='In Progress')||(case.Status=='Resubmit for Verification')||checkUser,True,False)}" >
                <input type="button" onclick="testsort('segSec{!segment.Segment_Order_No__c}');return false;" class="btn"  value="Save This Sequence" />   
            <apex:outputText rendered="{!IF((case.Status!='Closed RapidCue Success')||checkUser,True,False)}" >
                <input type="button"  class="btn" value="Resequence Cues" onclick="window.open('/apex/ReSequencingPage?Id={!case.id}','lookup','height=600,width=990,left=10,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');"/>

            <input type="button" id="toggleBtn" class="btn toggleBtn" value="Expand All" />
          <!--  <input type="button" onclick="last20songs();return false;" class="btn toggleBtn"  value="Last 20 Songs" rendered="!{!minSongs}"/>   -->
          <!--  <input type="button" onclick="showallsongs();return false;" class="btn"  value="Show All Songs" rendered="{!minSongs}"/>   
            <input type="button" onclick="showStuff('cpDataSpan', this); return false;" class="btn" value="Show All Composers & Publishers"/>
             <!--Start--Added for pagination-->  

             <!--End--Added for pagination 
           <!--To display the existing Songs-->  
            <div id="myPanel" class="segSecAcc"> 
            <apex:variable var="j" value="{!0}" />  
            <apex:repeat value="{!warpObject}" var="wrapSong" id="repeatSong">
              <apex:variable var="j" value="{!j+1}" />

                <div class="group">
                <apex:outputText rendered="{!IF((segment.id=wrapSong.seqObject.Cue_Sheet_Segment__r.id),True,False)}">
                <h3 class="ui-id-{!wrapSong.seqObject.Sequence_Order_No__c-1}" style=" height: ;" ><B>

                <table cellspacing="0" cellpadding="0" border="0" class="detailList">
                    <td  width="5%" >

                        <apex:outputText value="{!wrapSong.seqObject.Sequence_Order_No__c}"/> : 

                     <td   width="20%">

                         <apex:outputText value=" {!wrapSong.seqObject.Song_Title_Entry__c}"/>

                     <td  width="15%" >

                        <apex:outputText value=" {!wrapSong.seqObject.Duration_Min__c}"/> min 
                         <apex:outputText value=" {!wrapSong.seqObject.Duration_Sec__c}"/> sec

                     <td   width="25%"  >

                         <apex:outputText value=" {!wrapSong.seqObject.Cue_Usage__c}"/>

                     <td  width="10%"  >
                       (Occurrence:<apex:outputText value="{!wrapSong.seqObject.No_of_Occurances__c}"/>) 

                    <td >
                    <apex:image style="float:right" title="Not Verified" url="/img/permissions_deny16.gif" width="15px" rendered="{!IF(checkUserAdmin && wrapSong.seqObject.Verified__c==false,True,False)}"/>

                    <apex:image style="float:right" url="/img/permissions_confirm16.gif" title="Verified" width="15px" rendered="{!IF(checkUserAdmin && wrapSong.seqObject.Verified__c==true,True,False)}"/>
                    <apex:image style="float:right" url="/img/samples/flag_red.gif" title="New Song" width="15px" rendered="{!IF(checkUserAdmin && wrapSong.seqObject.Song__c == null,True,False)}"/>

                    <apex:image style="float:right" url="/img/samples/flag_green.gif" title="Existing Song" width="15px"  rendered="{!IF(checkUserAdmin &&((wrapSong.seqObject.Updated_CPA__c ==0 && wrapSong.seqObject.CPA_ModifySociety__c ==0 && wrapSong.seqObject.CPA_Deleted__c ==0  && wrapSong.seqObject.CPA_ModifyPercentage__c ==0) && wrapSong.seqObject.Modified_Title__c == false) && (wrapSong.seqObject.Song__c != null),True,False)}"/>
                    <apex:image style="float:right" url="/img/samples/flag_yellow.gif" title="Modified Song" width="15px" rendered="{!IF(checkUserAdmin &&((wrapSong.seqObject.Updated_CPA__c >=1  || wrapSong.seqObject.CPA_ModifySociety__c >=1  || wrapSong.seqObject.CPA_Deleted__c >=1  || wrapSong.seqObject.CPA_ModifyPercentage__c >=1) || wrapSong.seqObject.Modified_Title__c == True ) && (wrapSong.seqObject.Song__c != null),True,False)}"/>

                    <apex:image style="float:right" url="/img/msg_icons/warning24.png" title="Imported Songs" width="15px" rendered="{!IF(checkUserAdmin && wrapSong.seqObject.Is_Imported__c == True,True,False)}"/>
                    <apex:image style="float:right" url="/img/icon/form32.png" title="Comments" width="19px" rendered="{!IF(checkUserAdmin && (wrapSong.seqObject.Comments__c != null||wrapSong.seqObject.Comments__c != ''),True,False)}"/>

                     <a style="visibility: hidden">{!wrapSong.seqObject.id}</a>


         <span id="cpDataSpan{!j}"  style="display: none;">
                <table cellspacing="0" cellpadding="0" border="0" class="detailList">
                        <td colspan="2" class="dataCol  first  last"  >
                        <apex:outputText value="{!wrapSong.myComposers}"  escape="false" />

                    <td colspan="2" class="dataCol  first  last ">

                      <apex:outputText value="{!wrapSong.myPublishers}"  escape="false" />


Below is the vf code

Any suggestions would be highly appreciated..

  • A shortened controller that just highlights the issue would be easier to look at. – Florian Heer Oct 12 '17 at 14:44
  • Edited the code . – Natasha Oct 12 '17 at 15:20
  • can you add the "songSection" component? The rerender attribute takes the id of the component you are rerendering. – TemporaryFix Oct 12 '17 at 18:29

I could be mistaken, but the apex command button rerenders the section as soon as the button is clicked. Your server side code runs asynchronously and hasn't completed until after the button is clicked.

You should switch this to use an action function instead. The action function has a rerender attribute that rerenders after the function is complete. You can change the apex command button to a normal html button and call the action function with the onclick event handler.

VF is pretty dicey. We've defaulted to using lightning components and using Lightning Out to display them on visualforce pages to overcome the obstacles visualforce causes.

| improve this answer | |
  • i tried with the action function too but that does not also cause the rerender to happen. – Natasha Oct 12 '17 at 18:40
  • Can you update your question with the component that has the id of SongSection? – TemporaryFix Oct 12 '17 at 18:41
  • I have updated the code ,Can you please take a look now – Natasha Oct 13 '17 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.