+ Start a Discussion
Anand@SAASAnand@SAAS 

Rerender not working as expected

I have a simple VF page /controller as below.  When the “onChange” event fires, my controller method is invoked but the “pbsiState” section does not re-render correctly. The “theValues” outputPanel get’s re-rendered and displays the updated value.

 

 

<apex:page standardController="Lead" extensions="ABN_TestController">

<apex:outputPanel id="theValues">
State Required:{!isStateReq}
</apex:outputPanel>
<apex:form id="theForm">
<apex:pageBlock id="pbMain">
    <apex:pageBlockSection columns="2" id="pbStateCountry">
            <apex:pageBlockSectionItem id="pbsiCountry">
                <apex:InputField value="{!myLead.Country__c}" id="customerCountry">
                    <apex:actionSupport event="onchange" action="{!IsStateRequiredForCountry}" 
                                        reRender="theValues,theForm.pbMain.pbStateCountry.pbsiState"/>
                </apex:InputField>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="pbsiState">
                <apex:InputField value="{!myLead.State_Province__c}" id="customerState" required="{!isStateReq}" 
                                style="{!IF(isStateReq,'border-size:2px; border-color:#C00;border-style:solid;','')}"/>
                 State Required:{!isStateReq}               
            </apex:pageBlockSectionItem>
            
                
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

</apex:page>

 

 

Controller:

 

public with sharing class ABN_TestController {

    public Lead myLead {get; set;}
    public Boolean isStateReq {get; private set;}
    
    public ABN_TestController (ApexPages.StandardController controller) {
        myLead = new Lead();
    }
    
    public PageReference IsStateRequiredForCountry(){
      List<LeadStateProvRequiredCountries__c> theList=
          [Select Name from LeadStateProvRequiredCountries__c where Name=:myLead.Country__c];
      if(theList.size()==1){
          isStateReq=true;
      }
      return null;
    }
}

 

 

bob_buzzardbob_buzzard

From the Visualforce Developer's Guide (page 271)

 

--- snip ---

 

 

Also note that <apex:pageBlockSectionItem> componentscannot be rerendered; rerender the child components instead.
--- snip ---

 

sebcossebcos

Hi Anand,

please note that rerender needs an outputpanel to work, please find this simple example here:

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_quick_start_ajax_partial_page_updates.htm?SearchType=Stem .

 

This example is closer to what you are trying to achieve:

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_quick_start_ajax_partial_page_update_any_component.htm

 

Also, if you want to reference an id in a hierarchy you need to use the $Component variable:

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_best_practices_accessing_id.htm?SearchType=Stem

 

Here is the visualforce markup which should work for you:

 

 

<apex:page standardController="Lead" extensions="ABN_TestController">

<apex:outputPanel id="theValues">
State Required:{!isStateReq}
</apex:outputPanel>
<apex:form id="theForm">
<apex:pageBlock id="pbMain">
    <apex:pageBlockSection columns="2" id="pbStateCountry">
            <apex:pageBlockSectionItem id="pbsiCountry">
                <apex:outputLabel >test</apex:outputLabel>
                <apex:InputField value="{!myLead.Country}" id="customerCountry">
                    <apex:actionSupport event="onchange" action="{!IsStateRequiredForCountry}" 
                                        reRender="theValues,{!$Component.theForm.pbMain.pbStateCountry.pbsiState}"/>
                </apex:InputField>
            </apex:pageBlockSectionItem>
            <apex:outputPanel id="pbsiState">
           <apex:pageBlockSectionItem >
                <apex:InputField value="{!myLead.State}" id="customerState" required="{!isStateReq}" 
                                style="{!IF(isStateReq,'border-size:2px; border-color:#C00;border-style:solid;','')}"/>
                 State Required:{!isStateReq}               
            
           </apex:pageBlockSectionItem>   
           </apex:outputPanel>  
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

</apex:page>

 Please note that also a simple rerender=theValues,pbsiState would work in your case since there is no ambiguity in the IDs.

 

 

HariPHariP
Hi,

It works when we have outputPanel outside the pageBlock. Its not working when we want to rerender another pageblockSectionItem based on the selection of first value. Like the original question.

The links posted above, are talking about rerender section (outside pageBlock) and that works fine.

Hi Anand, I have same problem. Please post it here if you find any solution.

Thanks
Hari
HariPHariP
Hi Anand,

I did the following and it is working for me:
 
                            <apex:selectList value="{!Actions}" label="Action" size="1">
                                <apex:selectOptions value="{!UserActionsOptions}"/>
                                <apex:actionSupport event="onchange" action="{!showFromtxt}" reRender="fromPanel1,fromPanel2" />
                            </apex:selectList>

                        <apex:pageBlockSectionItem>
                            <apex:outputPanel id="fromPanel1">
                                <apex:outputLabel rendered="{!showFromtxtFlag}">From</apex:outputLabel>
                            </apex:outputPanel>
                            <apex:outputPanel id="fromPanel2">
                                <apex:inputText value="{!from}" label="from" rendered="{!showFromtxtFlag}" />
                            </apex:outputPanel>
                        </apex:pageBlockSectionItem>

Please post a comment if this works for you.

Thanks
Hari