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
Ahmed AdelAhmed Adel 

Show / hide Fields , Page Blocks in Visual Force Page

Hey 

Here is the case

I have 2 radio buttons and one outputpanel

I need when I click on the first radio button "Show the outputpanel"

When I click on the second radio button "hide the outputpanel"

 

I tries to do so but failed , so any one can help me

 

and Here you are what I have :

 

<apex:page showHeader="false" sidebar="false" controller="testAjax3_ctlr">   
  
  <apex:form onsubmit="return checkform(this);" id="myForm">
     <apex:actionfunction id="actfunc" name="actfunc" action="{!enableControl}" reRender="Controlled" />
     <script>
     
     function func(){ 
     alert("Before");
     actfunc();
     alert("after");
      } </script>
     
     <apex:selectRadio value="{!Application.VRF_Visa_Type__c}" required="true" onclick="func();">
         <apex:selectOptions value="{!VRFVisaType}"></apex:selectOptions>
     </apex:selectRadio>
  
     <apex:outputpanel id="Controlled" rendered="{!controllingVar}">
     
       <apex:inputCheckbox id="par" value="{!Application.VRF_Pre_approval_required__c}" />
     </apex:outputPanel>
  
     
     <apex:inputText id="fName" required="true" value="{!Application.First_Name__c}" size="18" onblur="this.value=this.value.toUpperCase()" style="color:#666;" onfocus="clearText(this);calendarControl.hide();" />
  
  </apex:form>
  
  
</apex:page>

 

 

and for the controller :

 

public class testAjax3_ctlr {



Public Boolean controllingVar {get; set;}
    Public Health_Card_Renewal_Form__c Application {get; set;}
    
    Public void enableControl(){ 
    system.debug('ahmed adel inside test method');
      Application.First_Name__c = 'vv';
      controllingVar = false ;
    
    }
    public List<SelectOption> getVRFVisaType()
    {
        List<SelectOption> options = new List<SelectOption>();
        
        options.add(new SelectOption('New Visa', 'New Visa'));
        options.add(new SelectOption('Renewal Visa', 'Renewal Visa'));
        
        return options;
    }
    public testAjax3_ctlr()
    {
        Application = new Health_Card_Renewal_Form__c();
        system.debug('Test log ahmed2');
        Application.First_Name__c = 'First';
        controllingVar = true;
    }




}

 

 

when I click on the first  radio button it calles the alert("before"); Successfully 

but stoped before calling the actfunc().

Starz26Starz26

Why not just put an id="radioOption" in the radio field

 

then in the output panel put:

 

rendered="{!IF(radioOption = 'New Visa',true,false)}"

 

if you want to hide when new visa is selected swap the true and false.

 

You can also pass the selected value to a {apex:param value="xxxxxx" assignTo {!controllingVar} and do away with the rest. Problem is I am unsure of how to pass the radio option. I think it could go like:

 

In your java function put:

 

var a = document.getElementById('{!$Component.radioOption}').value;

actfnc(a);

Under the <apex:actionFunction put

 

<apex:Param name="controllingvar" value=" " assignTo="{!controllingVar}"/>

 

For the radioOption add id="radioOption"

 

<apex:page showHeader="false" sidebar="false" controller="testAjax3_ctlr">   
  
  <apex:form onsubmit="return checkform(this);" id="myForm">

     <apex:actionfunction id="actfunc" name="actfunc" action="{!enableControl}" reRender="Controlled" >
<apex:param name="controllingVar" value=" " assignTo="{!controllingVar}"/>
</apex:actionFunction>

     <script>
     
     function func(){ 
  var a = document.getElementById('{!$Component.radioOption}').value;
     alert("Before");
     actfunc(a);
     alert("after");
      } 
</script>
     
     <apex:selectRadio id="radioOption" value="{!Application.VRF_Visa_Type__c}" required="true" onclick="func();">
         <apex:selectOptions value="{!VRFVisaType}"></apex:selectOptions>
     </apex:selectRadio>
  
     <apex:outputpanel id="Controlled" rendered="{!controllingVar}">
     
       <apex:inputCheckbox id="par" value="{!Application.VRF_Pre_approval_required__c}​" />
     </apex:outputPanel>
  
     
     <apex:inputText id="fName" required="true" value="{!Application.First_Name__c}" size="18" onblur="this.value=this.value.toUpperCase()" style="color:#666;" onfocus="clearText(this);calendarControl.hide();" />
  
  </apex:form>
  
  
</apex:page>

 The second way is best practice if it works in passing the correct value of the radioOption.

 

Can someone else with more expertise please look this over and confirm?