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
Siva SakthiSiva Sakthi 

How to hide and show the 3 different visualforce components in single vf page.

Hi,
       I have 3(forms) in different vf components with different controllers  show in a single VF page. The 1 st form (component) fill the details and click save means it should show the 2nd form(component ), then 2nd one completed means have to show the 3rd form(component) in same page . How to do this any idea. Pls guide me to solve this .

Eg:       Like 1 st form have Basic Info, 2nd form have qualification , 3rd form have Acheivement Details. If 1st Basic Info form(component) completed the details and click save means show the 2nd Qualification form (component)  in the same page.

<apex:page showHeader="false" sidebar="false"  >     
   
    <apex:outputpanel rendered="false" >
        <c:BasicInfo />
    </apex:outputpanel>
          
    <apex:outputpanel rendered="true" >
       <c:Qualification />
    </apex:outputpanel>
    
    <apex:outputpanel rendered="false" >
        <c:Achievement/>
    </apex:outputpanel>
      
</apex:page>

Advance Thanks
Siva

 
Srinivas SSrinivas S
public class VfContrl {
	public Boolean isFirst {get;set;}
	public Boolean isSecond {get;set;}
	public Boolean isThird {get;set;}
	
	public VfContrl() {
		isFirst = true;
		isSecond = isThird = false;
	}
	
	public save1() {
		//your logic
		isFirst = isThird = false;
		isSecond = true;
	}
	public save2() {
		//your logic
		isFirst = isSecond = false;
		isThird = true;
	}
}

--------------------------- 
<apex:page showHeader="false" sidebar="false"  controller="VfContrl">  
    <apex:outputpanel rendered="{!isFirst}" >
        <c:BasicInfo/>
    </apex:outputpanel>          
    <apex:outputpanel rendered="{!isSecond}" >
       <c:Qualification/>
    </apex:outputpanel>    
    <apex:outputpanel rendered="{!isThird}" >
        <c:Achievement/>
    </apex:outputpanel>      
</apex:page>
----------------------------------
Thanks,
Srinivas
- Please mark as solution if your problem is resolved.
Siva SakthiSiva Sakthi
Thanks for your Reply. I this all components have different controllers. 1. BasicInfo - BasicInfoConteoller, 2. Qualification -QualificationController, 3. Acheivement - AcheivementController. How to use this above code in this situation. And i tried this causing error like Unable to create Constructor Save 1 and Save 2. 
Srinivas SSrinivas S
Hi Siva,

Could you please try the following steps mentioned in the below link for the communication between component and the visualfore page -
https://developer.salesforce.com/page/Controller_Component_Communication

Please let me know if you are facing any problems.
----------------------------------
Thanks,
Srinivas
- Please mark as solution if your problem is resolved.
Siva SakthiSiva Sakthi
Hi,


    I tried this below code to show and hide visualforce components via jquery . While div id condition working fine but use the <c:c:EmployeeRegistrationComponent  id="EmpRegister"/>  means not working.  Pls confirm is it possible to acheive this via jquery.

Thanks 
<apex:page showHeader="false" sidebar="false" html-ng-app="test"> 
    <head>       
         <apex:stylesheet value="{!URLFOR($Resource.SLDS0121, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    </head>
    <script type="text/javascript">
        angular.module('test',[]);

        $(document).ready(function () {
            $("#RegEmp").show();
            $("#PwdConfirm").hide();
            $("#EquipmentEdit").hide();        
                     
            $('#EmpRegiter').click(function() {
                alert('Hi Welcome');
                console.log('Test::::::::');
                $("#RegEmp").hide();
                $("#PwdConfirm").show();
                $("#EquipmentEdit").hide();
                
               
            });
            
            $('#ConfirmPwd').on('click', function() {
               alert('Hi Welcome');
               jQuery('#EquipmentEdit').toggle('show');
               jQuery('#PwdConfirm').toggle('hide');
               jQuery('#RegEmp').toggle('hide');   
            });            
            
        });
       
    </script>

    <div id="RegEmp">
         <c:EmployeeRegistrationComponent id="EmpRegiter" /> 
         <button >Test </button>
    </div>  
                  
    <div id="PwdConfirm">
        <c:PasswordResetComponent id="ConfirmPwd"/>  
    </div> 
    
   <<div id="EquipmentEdit">
      <c:EquipmentEditComponent id="Equipment"/>
    </div>  
              
</apex:page>