+ Start a Discussion
ministe2003ministe2003 

How to do ajax refreshes without the need for apex:outpupanel

Hi all,

I needed to do an ajax refresh on a single pageblocksection item, which is a required field.  As anyone who's used actionsupport or another ajax function in salesforce will know, they pretty much require your items to be wrapped in an output panel in order to work.

Now this is fine if you want to refresh an entire pageblocksection but if you want to refresh one field within a section, wrapping it in an output panel causes the field to lose formatting and there seems to be no way to retain it.

 

Using the wonderful FireBug I've managed to make my field refresh without the need for output panel so we can format the fields in a SalesForcey way.  Here is an example of a row with two columns, a field and label in each:

 

 

<div class="pbSubSection">
<table class="detailList" cellSpacing="0" cellPadding="0" border="0">
<tbody>
<tr>
<td class="labelCol first">
<label>Stage</label>
</td>
<td class="dataCol first">
<div class="requiredInput">
<div class="requiredBlock"></div>
<apex:inputfield value="{!opp.StageName}">
<apex:actionSupport action="{!stageToggle}" event="onchange" reRender="myBP"/>
</apex:inputfield>
</div>
</td>
<td class="labelCol first">
<label>Forecast Category</label>
</td>
<td class="dataCol first">
<div class="requiredInput">
<div class="requiredBlock"></div>
<apex:inputField value="{!opp.Forecast_Stage__c}" id="forcat">
<apex:actionSupport event="onchange" reRender="csd, rsnlst, rsnlstdtl" status="status1"/>
</apex:inputField>
<apex:actionstatus id="status1">
<apex:facet name="start">
<apex:image url="/img/loading24.gif" rendered="true"/>
</apex:facet>
</apex:actionstatus>
</div>
</td>
</tr>
</tbody>
</table>
</div>

 

This comes out as follows:

 

 

use <tr> to make multiple rows (in this example there is just one) and wrap your label and field up in separate <tr> tags.

 

You dont need to include the requiredfield or requiredblock div tags as I have, they just add the red bar to show the field is required.

Anyone wondering what the image is in the actionstatus, it's a nice spinny loading image which looks like this:

 

 

The important thing to notice is the class references which call the style class data from the salesforce css files.

Also, DO NOT wrap this inside apex:pageBlockSection> tags or you'll kill it!

 

I hope people might find this useful :)

 

Steven