function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gautam_KasukhelaGautam_Kasukhela 

reRender not working when there are multiple PageBlocks in a VF Page

Hello All,
       I have a Custom VF page with 2 <apex:pageBlock> sections. One page block section is for data entry and the other is for showing a list of records. I have used reRender on selectOptions to re-render a page block having the list table. But when I change the value in the filter, the page block does not refresh and on the browser console, I get the following error "VFMetadataSender.js:65 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://welcometomyorg-dev-ed.my.salesforce.com') does not match the recipient window's origin ('null')."

However, if I remove the first page block section then the code works absolutely fine. What am I missing when using multiple pageBlocks?????

Below is the code::

<apex:page standardController="Contact" recordSetVar="contacts">
    
    <apex:form >
        <apex:pageBlock title="Create a New Contact" id="pb1">
            <apex:pageBlockSection title="Primary Details">
                <apex:inputField value="{! Contact.FirstName}"/>
                <apex:inputField value="{! Contact.LastName}"/>
                <apex:inputField value="{! Contact.Email}"/>         
            </apex:pageBlockSection>    
               <apex:pageBlockButtons >
                <apex:commandButton title="Create Contact" value="Save" action="{! save}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        
        <apex:pageBlock title="Contacts List" id="pb">
            <!-- Add a Filter-->
            Filter:
            <apex:selectList value="{! filterId}" size="1">
                <apex:selectOptions value="{! listViewOptions}"></apex:selectOptions>
                <apex:actionSupport event="onchange" reRender="pb"/>
            </apex:selectList>
            <apex:pageBlockTable value="{!contacts}" var="c" id="contactsTable">
                <apex:column value="{!c.FirstName}"/>
                <apex:column value="{!c.LastName}"/>
                <apex:column value="{!c.Email}"/>
            
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>    
</apex:page>
 
Best Answer chosen by Gautam_Kasukhela
VineetKumarVineetKumar
Use the below code : 
<apex:page standardController="Contact" recordSetVar="contacts">
    
    <apex:form >
        <apex:pageBlock title="Create a New Contact" id="pb1">
            <apex:pageBlockSection title="Primary Details">
                <apex:inputField value="{! Contact.FirstName}"/>
                <apex:inputField value="{! Contact.LastName}"/>
                <apex:inputField value="{! Contact.Email}"/>         
            </apex:pageBlockSection>    
               <apex:pageBlockButtons >
                <apex:commandButton title="Create Contact" value="Save" action="{! save}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        <apex:actionRegion>
			<apex:pageBlock title="Contacts List" id="pb">
				<!-- Add a Filter-->
				Filter:
				<apex:selectList value="{! filterId}" size="1">
					<apex:selectOptions value="{! listViewOptions}"></apex:selectOptions>
					<apex:actionSupport event="onchange" reRender="pb"/>
				</apex:selectList>
				<apex:pageBlockTable value="{!contacts}" var="c" id="contactsTable">
					<apex:column value="{!c.FirstName}"/>
					<apex:column value="{!c.LastName}"/>
					<apex:column value="{!c.Email}"/>	
					<apex:column value="{!c.OwnerId}"/>						
				</apex:pageBlockTable>
			</apex:pageBlock>
		</apex:actionRegion>
    </apex:form>    
</apex:page>

You need to wrap the second page block with a actionRegion, so that only this block is processed. 
Right now with your existing code, if it processing the whole form, and your form contains some mandatory field (lastName) for contact.
That' the reason that when you remove that page block it start working, because there is not validation error happening on the page.

Do mark my answer as best answer if it helped.

All Answers

VamsiVamsi
Hi,

Please try assigning the rerender id "pb" to pageblock table as  <apex:pageBlockTable value="{!contacts}" var="c" id="pb">
Gautam_KasukhelaGautam_Kasukhela
Hello Vamsi,
     I tried to reRender the page block table instead of the page block section, but even then it did not work.
VamsiVamsi
Hi Gautam,

Not sure It seems to be rendering fine when we comment out the entire page block "Create a New Contact"
VamsiVamsi
Hi Gautam,

In the above code plz Change the <apex:inputField > tag to <apex:inputtext>. Rerendereing seems to be working fine.

Please mark as best answre if it helps you.!!!
Gautam_KasukhelaGautam_Kasukhela
Hello Vamsi,
       The code did work with <apex:inputtext>, but why should I be using an input text instead of an input field in the first place? Does it mean reRender won't work when inputFields are used on the page. Also, by using inputtext I am loosing the necessary attributes that would aotherwise be associated with inputField (such as Mandatory field display for LastName).
 
VineetKumarVineetKumar
Use the below code : 
<apex:page standardController="Contact" recordSetVar="contacts">
    
    <apex:form >
        <apex:pageBlock title="Create a New Contact" id="pb1">
            <apex:pageBlockSection title="Primary Details">
                <apex:inputField value="{! Contact.FirstName}"/>
                <apex:inputField value="{! Contact.LastName}"/>
                <apex:inputField value="{! Contact.Email}"/>         
            </apex:pageBlockSection>    
               <apex:pageBlockButtons >
                <apex:commandButton title="Create Contact" value="Save" action="{! save}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        <apex:actionRegion>
			<apex:pageBlock title="Contacts List" id="pb">
				<!-- Add a Filter-->
				Filter:
				<apex:selectList value="{! filterId}" size="1">
					<apex:selectOptions value="{! listViewOptions}"></apex:selectOptions>
					<apex:actionSupport event="onchange" reRender="pb"/>
				</apex:selectList>
				<apex:pageBlockTable value="{!contacts}" var="c" id="contactsTable">
					<apex:column value="{!c.FirstName}"/>
					<apex:column value="{!c.LastName}"/>
					<apex:column value="{!c.Email}"/>	
					<apex:column value="{!c.OwnerId}"/>						
				</apex:pageBlockTable>
			</apex:pageBlock>
		</apex:actionRegion>
    </apex:form>    
</apex:page>

You need to wrap the second page block with a actionRegion, so that only this block is processed. 
Right now with your existing code, if it processing the whole form, and your form contains some mandatory field (lastName) for contact.
That' the reason that when you remove that page block it start working, because there is not validation error happening on the page.

Do mark my answer as best answer if it helped.
This was selected as the best answer
Gautam_KasukhelaGautam_Kasukhela
Thanks Vineet for the explanation.