vf page,radio rendering

Question

<apex:page standardController="Employee__c" extensions="testPage" tabStyle="Employee__c">

<apex:form id="frm1">

<div>
  <input type="radio" name="acc" checked="checked" value="Existing" onclick="pbBlockRenderJS('1');">Existing </input>



  <input type="radio" name="acc" value="NEWAcc" onclick="pbBlockRenderJS('2');">New</input>

  </div>




  <apex:pageBlock id="pb1" title="Pg Block 1" >
  <apex:pageBlockButtons >
 <apex:commandButton value="save" action="{!saving}"/>
   </apex:pageBlockButtons>

   <apex:pageBlockSection columns="1">
   <apex:inputField value="{!pme.Name}"/>
   <apex:inputField value="{!pme.Address__c}"/>
      <apex:inputField value="{!pme.Phone__c}"/>

   </apex:pageBlockSection>
  </apex:pageBlock>
<apex:outputPanel id="pnl1">

  <apex:pageBlock id="pb2" title="Pg Block 2" rendered="{!IF(mypbBlock == '2',true,false)}">
  <apex:pageBlockButtons >
 <apex:commandButton value="save" action="{!saving}"/>
  </apex:pageBlockButtons>

   <apex:pageBlockSection columns="1">
   <apex:inputField value="{!pme.Name}" />
<apex:inputField value="{!pme.Job_Title__c}"/>
   <apex:inputField value="{!pme.Salary__c}"/>

   </apex:pageBlockSection>
  </apex:pageBlock>

  </apex:outputPanel>

  <apex:actionFunction action="{!pbBlockRender}" name="pbBlockRenderJS" rerender="pb2">

        <apex:param name="firstParam" assignTo="{!mypbBlock}" value="" />

    </apex:actionFunction>

</apex:form>

</apex:page>

class

public with sharing class testPage {
public string Existing{get; set;}
public string NEWAcc{get; set;}

    public Employee__c emp{get;set;}
    public Employee__c pme{get;set;}
    public Employee__c emplist{get;set;}
    public String var {get;set;}
        public boolean editSection {get;set;}

        public testPage(ApexPages.StandardController controller) {
            Employee__c emp=new Employee__c();
            pme=(Employee__c )controller.getRecord();
            editSection =true;
            var= ApexPages.currentPage().getParameters().get('Id');
             system.debug('erecrrrtrtrt');

                system.debug('erecrrrtrtrt'+NEWAcc);
            if(var!=null){
            emplist=[select Name,Address__c,Phone__c,Job_Title__c,Salary__c  From Employee__c where id=:var];
            system.debug('id'+var);
            }
            }
        public PageReference saving(){
                        system.debug('erecrrrtrtrt'+Existing);

                system.debug('erecrrrtrtrt'+NEWAcc);
            upsert pme;
            PageReference p=new PageReference ('/'+pme.id);
            p.setRedirect(true);
            return p;
            }
    public PageReference pbBlockRender() {
    return null;
    }
    public PageReference EdittheSection (){
editSection = true;
return null;

        }

    public String mypbBlock { get; set; }
}

I have two radio buttons,by default Existing is selected so Pg Block 1 is displayed works fine but am not able to display Pg Block 2 when New radio is selected,please help me how to solve it..Iam a fresher.

Answer 1

If you don't have a reason to go back to the server when the radio buttons are clicked, you can do all the processing at the client-side using CSS to show or hide the page block found by using getElementById. This gives a more immediate response to the user's actions:

<apex:page id="p">
<apex:form id="f">
    <div>
        <input type="radio" name="acc" value="Existing" checked="checked"
                onclick="show(true, false);">Existing</input>
        <input type="radio" name="acc" value="NEWAcc"
                onclick="show(false, true);">New</input>
    </div>
    <apex:pageBlock id="pb1" title="Pg Block 1">
    </apex:pageBlock>
    <apex:pageBlock id="pb2" title="Pg Block 2">
    </apex:pageBlock>
</apex:form>   
<script>
function show(showPb1, showPb2) {
    // Match Visualforce's prefixing pattern
    document.getElementById('p:f:pb1').style.display = showPb1 ? 'block' : 'none';
    document.getElementById('p:f:pb2').style.display = showPb2 ? 'block' : 'none';
}
show(true, false);
</script>
</apex:page>

Answer 2

The reason why you cannot see the Pg Block 2 is that the following expression does not evaluate to 'true' : rendered="{!IF(mypbBlock == '2',true,false)
In other words you are not setting the mypbBlock variable to 2 inside your testPage class.