function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
alonmalonm 

Ajax: rerendering a pageBlock that has a rendered attribute

I am trying to write a VF page that does the following:

I have one page block ("pageblock1") with an "open" button. When i press this button, another page block appears ("pageblock2") with a "close" button. When pageblock2 appears, the "open" button in pageblock1 should be disabled. Then, when i press on the "close"in pageblock2, pageblock2 should disappear again, and the "open" button in pageblock1 should be enabled.

This is a code that produces such a behaviour:

 

** page **

 

<apex:page controller="test1">
    <apex:form >
        <apex:pageBlock title="Block1" id="Block1">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!showBlock2}" value="open" disabled="{!IsShown}"/>
        </apex:pageBlock>
        <apex:pageBlock title="Block2" id="Block2" rendered="{!IsShown}">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!closeBlock2}" value="close"/>
        </apex:pageBlock> 
    </apex:form>
</apex:page>

 

 

** controller **

 

public class test1
{
    public boolean IsShown{set;get;}
   
    public void showBlock2()
    {
        IsShown = true;
    }
   
    public void closeBlock2()
    {
        IsShown = false;
    }
}

 

However, I want to use ajax in this page, but this doesnt give me the desired result. I tried simply to add a rerender attribute to both commandButtons : <apex:commandButton ... rerender="Block1, Block2"/>. What happens is that Block1 is being rerendered (the button becomes disabled and the label changes its value) - but block2 does not appear. I guess it is because Block2 rendered attribute remains false, althogh the isShown property is true.

 

Any suggestions?

 

Thanks, Alon

 

Best Answer chosen by Admin (Salesforce Developers) 
SreerupSreerup

Hi,

 

Please try out the following modified code:

 

<apex:page controller="test1">
    <apex:form >
       <apex:outputpanel id="Panel1">
        <apex:pageBlock title="Block1" id="Block1">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!showBlock2}" value="open" disabled="{!IsShown}" rerender="Panel2,Panel1"/>
        </apex:pageBlock>
       </apex:outputpanel>
       <apex:outputPanel id="Panel2">
        <apex:pageBlock title="Block2" id="Block2" rendered="{!IsShown}">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!closeBlock2}" value="close"/>
        </apex:pageBlock>
       </apex:outputpanel>
    </apex:form>
</apex:page>

All Answers

SreerupSreerup

Hi,

 

Please try out the following modified code:

 

<apex:page controller="test1">
    <apex:form >
       <apex:outputpanel id="Panel1">
        <apex:pageBlock title="Block1" id="Block1">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!showBlock2}" value="open" disabled="{!IsShown}" rerender="Panel2,Panel1"/>
        </apex:pageBlock>
       </apex:outputpanel>
       <apex:outputPanel id="Panel2">
        <apex:pageBlock title="Block2" id="Block2" rendered="{!IsShown}">
            <apex:outputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!closeBlock2}" value="close"/>
        </apex:pageBlock>
       </apex:outputpanel>
    </apex:form>
</apex:page>

This was selected as the best answer
alonmalonm

Thanks a lot, this indeed solved the initial problem - But can anyone explain why the rerender doesn't work for pageBlocks that are not inside of an OutputPanel?

 

Anway, as i continued with my page, i stumbled into another problem. if i add a java script "are you sure?"message box to the close button in block2, the refresh fails. This is the page code (didnt change anything in the controller):

 

<apex:Page controller="test1">
    <apex:form >
       <apex:Outputpanel id="Panel1">
        <apex:PageBlock title="Block1" id="Block1">
            <apex:OutputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!showBlock2}" value="open" disabled="{!IsShown}" rerender="Panel1, Panel2"/>
        </apex:PageBlock>
       </apex:Outputpanel>
       <apex:OutputPanel id="Panel2">
        <apex:PageBlock title="Block2" id="Block2" rendered="{!IsShown}" >
            <apex:OutputLabel value="{!IsShown}"/>
            <apex:commandButton action="{!closeBlock2}" value="close" onclick="return confirm('Are you sure?');" rerender="Panel1, Panel2"/>
        </apex:PageBlock>
       </apex:Outputpanel>
    </apex:form>
</apex:Page>

 

Again, without rerender tags the page works fine, but with them the page seems to "get stucked" after the js onclick event and no refresh occurs. Is there any workaround for this behaviour?

 

jwetzlerjwetzler

See this post for an explanation on the rerender issue.  If it's not in the DOM, it will not be found to rerender.

 

For the onclick issue, known issue, you'll want to do something like onclick="if (!confirm('Are you sure?')) { return false; }"