Search This Blog

Monday, August 1, 2011

Salesforce.Com - Visualforce Rerender Pain

The story is basically, I had a visualforce page that was based around a table, with multiple nested apex:outputPanel tags.

Now this was an inherited page for myself, but to cut this short, basically a button on the page should submit a ajax post, add an opportunity line item and rerender the whole table to show the new item.

Ontop of this certain cell columns in the table should be hidden based on a flag stored within salesforce.

Now, 5 days of beating my head against the issue that when you hit that button, the table didnt rerender, eventually this was the resolution.

All tags within the table should be set as layout="none" on the apex:outputPanels and around the table, having a standard block layout outputPanel and rerendering this panel solved the issue.

The reason behind this was discoved to be that a refresh of a div or span that is outside of a TD or TR tag will not rerender the content inside that tag, which makes sense consider div/span tag wrapping TD or TR's is techinally invalid HTML.

The code:


<apex:form>
<apex:outputPanel id="Refresher">
<table>
<tr>
<apex:outputPanel layout="none" rendered="{!showFlag}">
<td>This field may or may not be here</td>
</apex:outputPanel>
<td>This field will always be here</td>
</tr>
<apex:repeat>
<tr>
<apex:outputPanel layout="none" rendered="{!showFlag}">
<td>Optional Data</td>
</apex:outputPanel>
<td>Required Data</td>
</tr>
</apex:repeat>

<tr>
<apex:outputPanel layout="none" rendered="{!showFlag}">
<td><input type=text name="OptionalInput"></td>
</apex:outputPanel>
<td><input type=text name="RequiredInput"></td>
</tr>

</table>
</apex:outputPanel>

<apex:commandbutton action="{!save}" rerender="Refresher" value="DO IT"/>
</apex:form>

So from this code (which is by no means complete) clicking on the button will do a save action in your controller but will rerender the data in your table, including a repeat tag, but based on the value of showFlag, a whole verticle column will be hidden.

I hope this helps someone out there, cause man my head still hurts from the desk banging.

7 comments:

Pete said...

Massive thanks! Saved us five days of pain!

Stuart Gare said...

Spot on, solved my issue!
I narrowed it down to a nested output panel within a table, this led me to your post.
Thanks , worked a treat!

Blake Young said...

Glad that it was able to help!

21st Century Software Solutions said...
This comment has been removed by a blog administrator.
sss said...
This comment has been removed by a blog administrator.
Girish said...

Thanks allot for this! i was banging my head for last 2 day... hopefully i dont have to bang more than u...

Simon said...

Just wanted to thank you for this - was seeing some very strange table rerendering issues with data being re-displayed OUTSIDE the Table headers... adding the 'layout=none' to just one output panel made all the difference.