In this blog, we will take on the reRender beast, which really isn’t a beast at all.

Some theory:
reRender is one of the simplest ways of partially updating a VF page after a user action.

Here is an exhaustive list of where you can use reRender attribute:
1. commandButton
2. commandLink
3. apexSupport
4. apexFunction
(please tell if there are anymore outside of my knowledge)

No more wait. Lets code!!
But first lets understand how commandButton works: So the user clicks on the button which either submits the form and refreshes the page or submits the form through AJAX. Woohoo.. what is AJAX? Simply put, its a way for client ie. your browser to communicate with the server and edit the page DOM without having to refresh the page.

As always, find all the comments in the code itself.

public class dynamicPage_v2Controller {
    //controller that will add a hello message after button press//
    public List<String> lst{get;set;} //variable for VF access
    public dynamicPage_v2Controller() {
        lst = new List<String>{'hello 1'}; //setting the first time value on page load
    }
    public void button() {
        Integer a = Integer.valueOf(lst.size()+1); //to say hello 2/3/4/5 etc
        lst.add('hello '+string.valueof(a)); 
        system.debug('lst = '+lst); 
    }
}
<apex:page controller="dynamicPage_v2Controller" showHeader="false">
    <p><b> Section rendered through Ajax: </b> </p>
    <a>--------------------------------------------------</a> <br/>
    <apex:outputPanel id="lst">
        <apex:repeat value="{!lst}" var="string">
            <apex:outputText value="{!string}"/><br/>
        </apex:repeat>
    </apex:outputPanel>
    --------------------------------------------------<br/>
    -------------------------------------------------- <br/>
    <p><b> Section not rendered through Ajax, but page refresh: </b></p>
    -------------------------------------------------- <br/>
    List values = {!lst} <br/>
    --------------------------------------------------<br/>
    -------------------------------------------------- <br/>
    <apex:form >
        <br/><br/>
        <apex:commandButton action="{!button}" value="!normal_ajax!" reRender="lst" /> 
        When reRender is within the commandButton tag <br/>
        <apex:commandButton action="{!button}" value="!hack_ajax!" >
        	<apex:actionSupport event="oncomplete" reRender="lst"/>
        </apex:commandButton>
        When actionsupport is used with event=oncomplete (undocumented HACK!) <br/>
        <apex:commandButton action="{!button}" value="!no_Ajax!" >
        	<apex:actionSupport event="onclick" reRender="lst"/>
        </apex:commandButton>  
        When actionsupport is used with event=onclick, while button has no rerender <br/>
        <apex:commandButton action="{!button}" value="!ajax_no_reRender!" reRender="null">
        	<apex:actionSupport event="onclick" reRender="lst"/>
        </apex:commandButton>     
        <apex:commandButton value="!Refresh!" reRender="lst"/>
        When actionsupport is used with event=onclick, while button has rerender=null <br/>
    </apex:form>

</apex:page>

Here is what happens when each of the buttons is pressed:
1. “Normal ajax”: This is the ideal way of using the reRender with commandbutton. When you the press the button, the controller method is called. After the method ends, the reRender of lst occurs
2. “hack_ajax”: We will talk about this at the end of the blog
3. “no_ajax”: Notice the button has no rerender and we try to use rerender with actionSupport. Since the button doesnt know that AJAX is to be used, it simply refreshes the page after submitting the form. The actionSuport has no meaning here.
4. “ajax_no_reRender”: Here, we tell the button that you have to use AJAX, however since the reRender is null nothing gets reRendered. You will ask then why didnt the actionSupport kick in. As a matter of fact it does kick in although there is a sort of race between button and actionSupport and the result is unexpected. Sometimes the “lst” will reRender by pressing the button and other times it wont. Furtherore, to play around use the refresh button and verify that in the background the controller fucntion is being called everytime you press the button.

Now finally, I want to talk about “hack_ajax”. This is my discovery by chance. Surprisingly it works just like “Normal ajax”. But the funny part is that the event onComplete is not defined in JS standards. Do play around and you will notice that if you change onComplete to something else the button refreshes the page. My best guess is that javascript does read event=onComplete, however I am still not sure where will I be using this hack.

I hope you enjoyed reading.
Thanks a ton!!
H Mann.

Advertisements