Hiding and showing page block section on a Visualforce page using java function

on

The javascript function would look like this

 First you are going to define the count of page block sections for minimum and maximum. Forex ample minimum you want to show and maximum you want to show 12 page sections.

<body>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/
jquery.min.js"></script>

</body>

<body>   
  
<script>

    var j$ = jQuery.noConflict();    


var vCurrent=1;
    
    var vMinSections = 1;
    var vMaxSections = 12;


function reRenderPageSections(){
        for(var vIndx = 1; vIndx <= vMaxSections; vIndx ++){
            
                
                var vSec = "[id$=pbSec" + vIndx + "]";
                
               
                if(vIndx <= vCurrent){
                    j$(vSec).show();
                }
                else{
                    j$(vSec).hide(); 
                    }
     }
}


function btnAddClick(pVal){
        vCurrent = vCurrent + pVal;
        if(vCurrent <= vMinSections){
            vCurrent = vMinSections;
        }
        else if (vCurrent > vMaxSections){
            vCurrent = vMaxSections;
        }
        reRenderPageSections();
    }
    






<script>



</body>








Now you can use this btnAddClick which hides and shows pageblocksections, in you aepx command 



button.Passing 1 for adding section and passing -1 for removing sections.
















<apex:pageBlockSection id="header" >
            <apex:commandButton id="addBtn" value="Add Array" onclick="btnAddClick(1); 


return false;"/>
            <apex:commandButton id="remBtn" value="Remove Array" onclick="btnAddClick(-1); 


return false;"/>











</apex:pageBlockSection >

Comments

Post a Comment