Hide and show pageblock section

Question

i created a visualforce page.here is small snippet from that

<apex:form id="form">
<apex:outputPanel id="flowPanel"> 
<apex:pageBlock title="Dynamic Flow" id="pageblock" >
<apex:pageBlockSection rendered="{!NOT(renderForm)}">
Hello World
</apex:pageBlockSection>

<apex:pageBlockSection columns="1" id="pagesection" rendered="{!renderForm}">
 <table style="margin:auto;" id='table'>
        <tbody id='tbody'>
        <tr>
         <td  style="text-align:right">Header Color :</td> <td><input type="color" style="margin-left:10px" id='hColor' value="#{!dFlow.Header_Color__c}"/></td>
        </tr>
        <tr>
         <td style="text-align:right">Background Color :</td> <td><input type="color" id="bgColor" style="margin-left:10px" value="#{!dFlow.Background_Color__c}"/></td>
        </tr>
        <tr>
         <td style="text-align:right">Footer Color :</td> <td><input type="color" style="margin-left:10px" id="fColor" value="#{!dFlow.Footer_Color__c}"/></td>        
         </tr>
        <tr>
        <td style="text-align:right">Company Logo :</td><td><input  type="file" style="margin-left:10px" id="file"/></td>
        </tr>
        <tr>
      <td style="text-align:right"> Tag Line :</td><td><textArea id="tagLine" maxlength='255' rows="3" cols="50" style="margin-left:10px">{!dFlow.Tag_Line__c}</textArea></td>
        </tr>
      <tr><td style="text-align:right" > Flow Name :</td><td>
      <select id="flowList" style="margin-left:10px"></select>
      </td>
      </tr>
      <tr id='trow'><td></td><td>
        <apex:commandButton value="Submit" id="submitBtn" onclick="ClickEventHandler()" style="margin:10px" rerender="flowPanel"/>  
      </td>
      </tr>
        </tbody>

       </table>
</apex:pageBlockSection>
</apex:pageBlock>
      </apex:outputPanel>

when button get clicked i want to hide this big form section and want to show Hello World page section.but when i click on button.it will call an action function from ClickEventHandler whose definition is

<apex:actionFunction name="setAttachment" action="{!setAttachment}" rerender="flowPanel" >
<apex:param name="fileName" value="" assignTo="{!attachment.Name}"/>
<apex:param name="fileContent" value="" />
<apex:param name="headerColor" value="" assignTo="{!dFlow.Header_Color__c}"/>
<apex:param name="footerColor" value="" assignTo="{!dFlow.Footer_Color__c}"/>
<apex:param name="bgColor" value="" assignTo="{!dFlow.Background_Color__c}"/>
<apex:param name="tagLine" value="" assignTo="{!dFlow.Tag_Line__c}"/>
<apex:param name="flowName" value="" assignTo="{!dFlow.Flow_Name__c}"/>
</apex:actionFunction>

and apex function is

 public void setAttachment()
{  renderForm =false;
    System.debug('renderForm is'+renderForm);
    String fileContent = ApexPages.currentPage().getParameters().get('fileContent');
    upsert dFlow;   
    if(fileContent.length() >23)
    {attachment.Body = EncodingUtil.base64Decode(fileContent.substring(5+11+7));
    /*if(attachment.ParentId == null)
    attachment.ParentId = dFlow.Id;
    */upsert attachment;
    }
}   

but on rerender same block is rendering again and again.in constructor i am making renderForm =true; .in rerender constructor is called??Please tell any suitable method so that after click Hello world page block section will get rendered.

Answer 1

Hello I have gone through your code and found some gaps. In command button when you are calling action function after that use return false; like below:

<apex:commandButton value="Submit" id="submitBtn" onclick="ClickEventHandler(); return false;" style="margin:10px" rerender="flowPanel"/>

This will stop reloading the page.

The other thing I noticed is that you are not passing any value to param "fileContent", so in controller it will give you a null pointer exception. So please check on this one also.

Answer 2

You need to re-render the parent element which will re-evaluate the render attributes on each of the children. So instead of re-rendering "flowPanel", try re-render="form".