+ Start a Discussion
wesnoltewesnolte 

Problem rerendering pageblocktable

Hello

 

I'm having an issue rerendering a pageblocktable after a record is inserted via a simple modal javascript/visualforce form. The strange thing is that I can see that the method that populates the table is called after the insert (I've checked the debug log) and that the number of rows returned is 1 more than before the insert. If I refresh the page it displays the record. The code follows:

 

VisualForce

 

<apex:page controller="RecipeController"> <!-- Javascript removed to ease readability --> <!-- datatable with list --> <apex:sectionHeader title="Recipes"/> <apex:form > <apex:actionStatus id="status" startText="Updating..."></apex:actionStatus> <apex:pageBlock title="Current Recipes" id="recipeList"> <apex:pageblocktable value="{!recipes}" var="recipe"> <apex:column > <apex:facet name="header">Name</apex:facet> <apex:outputfield value="{!recipe.name}"/> </apex:column> <apex:column > <apex:facet name="header">Short Description</apex:facet> <apex:outputfield value="{!recipe.ShortDescription__c}"/> </apex:column> <apex:column > <apex:facet name="header">Rating</apex:facet> <apex:outputfield value="{!recipe.Rating__c}"/> </apex:column> </apex:pageblocktable> <apex:pageblockbuttons location="top"> <apex:commandButton value="New" onComplete="YAHOO.recYippee.showMe();" rerender="recipeEdit"/ > <apex:commandbutton value="Refresh" status="status"/> </apex:pageblockbuttons> </apex:pageBlock> </apex:form> <!-- Modal window opened by javascript --> <div id="EditNew" style="display: none" > <div class="hd"> <apex:outputText value="Recipe Details" /> </div> <div class="bd"> <apex:actionregion > <apex:form id="RecipeEdit"> <apex:pageBlock title="List of stored recipes"> <apex:pageblocksection > <apex:inputField value="{!r.name}"/> <apex:inputField value="{!r.ShortDescription__c}" /> <apex:inputField value="{!r.Ingredients__c}" /> <apex:inputField value="{!r.CookingInstructions__c}" /> <apex:inputField value="{!r.CostPerPerson__c}" /> </apex:pageblocksection> <apex:pageblockButtons location="bottom"> <apex:commandButton value="Save" action="{!saveRecipe}"/> <apex:commandButton value="Cancel" immediate="true" oncomplete="YAHOO.recYippee.hideMe();" /> </apex:pageblockButtons> </apex:pageBlock> </apex:form> </apex:actionregion> </div> <div class="ft" style="font-size: 10px;"> <apex:outputPanel layout="block"> Please click the 'Save' button to store the recipe or cancel to return to the previous page. </apex:outputPanel> </div> </div> </apex:page>

 

 Apex Code

 

public class RecipeController{ private Recipe__c recipe = new Recipe__c(); private List<Recipe__c> recipes = new List<Recipe__c>(); public Recipe__c r{get{return recipe;}set{recipe=value;}} public RecipeController(){} public List<Recipe__c> getRecipes(){ recipes = [SELECT name, shortDescription__c, rating__c, costPerPerson__c, cookingInstructions__c, ingredients__c FROM recipe__c]; return recipes; } public void setRecipes(){} public PageReference SaveRecipe(){ upsert r; return null; } }

 

The javascript is not the issue, as I've used it in other places and it works fine. Any ideas?

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
PSteves91PSteves91

Hello,

 

I wanted to share my knowledge on this topic. 

 

It seems to me the reason why you are seeing your data rerendered is because when you copy the modal example, all the data is loaded when the page loads - and consequently, when the extension is invoked.

 

I was running into this same issue.

 

The solution to this is to rerender the 'pageBlock' not the pageBlockTable or dataTable. 

 

It seems that rerendering the pageBlock forces a reRendering of the elements inside of the pageBlock, including the pageBlcokTable.

 

Also, if you are displaying values in a table and using those values to control the display of the modal popup, make sure you clear the results displayed in the pageBlockTable before the user clicks another field value that displays the same modal popup with different data.

 

For my need, a button on a Job Description page takes the user to a page that displays summarized details of that job as well as all candidates that match the skill sets and other parameters. For each candidate returned in the dataTable, I need to use the popup modal to display summarized details about the candidate and how their skillsets relate to the currently viewed job description.

 

The user clicks a link called 'view' next to the name of the candidate and a popup modal opens displaying the candidates' summarized info. The user clicks close and can click on another candidate to see that person's details.

 

Here is a snippet of the code I used:

 

This VF code works with my extension to generate a dataTable with the candidate's name 2 links, 1 to view the candidates' summarized info and 1 to apply for the job:

 

<apex:outputPanel id="exactMatch" rendered="{!contactFull.size > 0}">

<td align="center" valign="middle" style="border-right:dotted; border-weight:1pt">

<apex:dataTable value="{!contactFull}" var="emt" title="Exact Match" styleClass="tableClass">

<apex:facet name="header">Exact Match</apex:facet>

<apex:column >

<apex:commandLink action="{!viewer}" onComplete="YAHOO.force.com.showMe();" reRender="memberShine">

view

<apex:param name="viewmId" value="{!emt.id}" assignTo="{!appMemberId}"/>

</apex:commandLink>

|

<apex:commandLink action="{!apply}">

apply

<apex:param name="mida" value="{!emt.id}" assignTo="{!appMemberId}"/>

<apex:param name="jlida" value="{!Job_Lead__c.id}" assignTo="{!jobLeadId}"/>

<apex:param name="jlwagea" value="{!Job_Lead__c.Hourly_Wage__c}" assignTo="{!wage}"/>

</apex:commandLink>

</apex:column>
 Notice the reRender function on the commandLink. The following shows the VF code being reRendered:

<apex:form >

<apex:actionRegion >

<apex:pageBlock id="memberShine" title="Member Details" tabStyle="Contact">

<apex:pageBlockSection columns="3" title="{!miniMember.FirstName} {!miniMember.LastName} - Current Salary: ${!miniMember.CW_EH_Current_Salary__c}" collapsible="true">

<apex:outputField value="{!miniMember.Skill_Sets__c}"/>

<apex:outputField value="{!miniMember.Shift__c}"/>

<apex:outputField value="{!miniMember.Can_speak_Spanish__c}"/>

<apex:outputField value="{!miniMember.Education__c}"/>

<apex:outputField value="{!miniMember.KPH__c}"/>

<apex:outputField value="{!miniMember.X6_Month_Job_Stability__c}"/>

<apex:outputField value="{!miniMember.Lifting__c}"/>

<apex:outputField value="{!miniMember.WPM__c}"/>

<apex:outputField value="{!miniMember.X1_Year_Job_Stability__c}"/>

</apex:pageBlockSection>

<apex:pageBlockSection title="Criminal Records" columns="1" collapsible="true">

<apex:pageBlockTable value="{!miniMemberCRecords}" var="miniM" rendered="{!miniMemberCRecords.size > 0}">

<apex:column value="{!miniM.Year__c}" headerValue="Year"/>

<apex:column value="{!miniM.Type__c}" headerValue="Type"/>

<apex:column value="{!miniM.Category__c}" headerValue="Category"/>

<apex:column value="{!miniM.Description__c}" headerValue="Description"/>

<apex:column value="{!miniM.Counts__c}" headerValue="Counts"/>

</apex:pageBlockTable>

</apex:pageBlockSection>

</apex:pageBlock>

<div style="text-align: right;" >

<apex:commandButton immediate="true" title="Close" value="Close"

oncomplete="YAHOO.force.com.hideMe();" />

</div>

</apex:actionRegion>

</apex:form>
 My extension clears the results everytime a user clicks 'view'.

 

Hope this helps.

 

All Answers

Ron HessRon Hess
in your save button, specify a rerender attribute, i think
rerender="recipeList"
wesnoltewesnolte

Hi Ron

 

I seemed to have removed that when I was debugging and posted the stripped down code(oops). The code for the buttons on the hidden div is:

 

 

<apex:pageblockButtons location="bottom"> <apex:commandButton value="Save" action="{!saveRecipe}" oncomplete="YAHOO.recYippee.hideMe();" rerender="recipeList"/> <apex:commandButton value="Cancel" immediate="true" oncomplete="YAHOO.recYippee.hideMe();" /> </apex:pageblockButtons>

 

 This doesn't refresh the list either. If I include an action status on the 'parent' page I can see the StartText being display (and as I mentioned the debug log says the new row is being fetched) but only the old data is shown in the datatable.

 

Thanks,

Wes

 

PSteves91PSteves91

Hello,

 

I wanted to share my knowledge on this topic. 

 

It seems to me the reason why you are seeing your data rerendered is because when you copy the modal example, all the data is loaded when the page loads - and consequently, when the extension is invoked.

 

I was running into this same issue.

 

The solution to this is to rerender the 'pageBlock' not the pageBlockTable or dataTable. 

 

It seems that rerendering the pageBlock forces a reRendering of the elements inside of the pageBlock, including the pageBlcokTable.

 

Also, if you are displaying values in a table and using those values to control the display of the modal popup, make sure you clear the results displayed in the pageBlockTable before the user clicks another field value that displays the same modal popup with different data.

 

For my need, a button on a Job Description page takes the user to a page that displays summarized details of that job as well as all candidates that match the skill sets and other parameters. For each candidate returned in the dataTable, I need to use the popup modal to display summarized details about the candidate and how their skillsets relate to the currently viewed job description.

 

The user clicks a link called 'view' next to the name of the candidate and a popup modal opens displaying the candidates' summarized info. The user clicks close and can click on another candidate to see that person's details.

 

Here is a snippet of the code I used:

 

This VF code works with my extension to generate a dataTable with the candidate's name 2 links, 1 to view the candidates' summarized info and 1 to apply for the job:

 

<apex:outputPanel id="exactMatch" rendered="{!contactFull.size > 0}">

<td align="center" valign="middle" style="border-right:dotted; border-weight:1pt">

<apex:dataTable value="{!contactFull}" var="emt" title="Exact Match" styleClass="tableClass">

<apex:facet name="header">Exact Match</apex:facet>

<apex:column >

<apex:commandLink action="{!viewer}" onComplete="YAHOO.force.com.showMe();" reRender="memberShine">

view

<apex:param name="viewmId" value="{!emt.id}" assignTo="{!appMemberId}"/>

</apex:commandLink>

|

<apex:commandLink action="{!apply}">

apply

<apex:param name="mida" value="{!emt.id}" assignTo="{!appMemberId}"/>

<apex:param name="jlida" value="{!Job_Lead__c.id}" assignTo="{!jobLeadId}"/>

<apex:param name="jlwagea" value="{!Job_Lead__c.Hourly_Wage__c}" assignTo="{!wage}"/>

</apex:commandLink>

</apex:column>
 Notice the reRender function on the commandLink. The following shows the VF code being reRendered:

<apex:form >

<apex:actionRegion >

<apex:pageBlock id="memberShine" title="Member Details" tabStyle="Contact">

<apex:pageBlockSection columns="3" title="{!miniMember.FirstName} {!miniMember.LastName} - Current Salary: ${!miniMember.CW_EH_Current_Salary__c}" collapsible="true">

<apex:outputField value="{!miniMember.Skill_Sets__c}"/>

<apex:outputField value="{!miniMember.Shift__c}"/>

<apex:outputField value="{!miniMember.Can_speak_Spanish__c}"/>

<apex:outputField value="{!miniMember.Education__c}"/>

<apex:outputField value="{!miniMember.KPH__c}"/>

<apex:outputField value="{!miniMember.X6_Month_Job_Stability__c}"/>

<apex:outputField value="{!miniMember.Lifting__c}"/>

<apex:outputField value="{!miniMember.WPM__c}"/>

<apex:outputField value="{!miniMember.X1_Year_Job_Stability__c}"/>

</apex:pageBlockSection>

<apex:pageBlockSection title="Criminal Records" columns="1" collapsible="true">

<apex:pageBlockTable value="{!miniMemberCRecords}" var="miniM" rendered="{!miniMemberCRecords.size > 0}">

<apex:column value="{!miniM.Year__c}" headerValue="Year"/>

<apex:column value="{!miniM.Type__c}" headerValue="Type"/>

<apex:column value="{!miniM.Category__c}" headerValue="Category"/>

<apex:column value="{!miniM.Description__c}" headerValue="Description"/>

<apex:column value="{!miniM.Counts__c}" headerValue="Counts"/>

</apex:pageBlockTable>

</apex:pageBlockSection>

</apex:pageBlock>

<div style="text-align: right;" >

<apex:commandButton immediate="true" title="Close" value="Close"

oncomplete="YAHOO.force.com.hideMe();" />

</div>

</apex:actionRegion>

</apex:form>
 My extension clears the results everytime a user clicks 'view'.

 

Hope this helps.

 

This was selected as the best answer
ZHANG XINGZHANG XING
@PSteves91
Thanks. It helped me to solve my problem.
By the way you can also reRender pageBlockSection if you don't want to reRender the whole pageBlock.