0

I have a visualforce page.based on command link click i want to disaply different pageblock.I want to achieve this using jquery. Please guide me

vf:

   <apex:page standardController="Contact" extensions="getAccountID_ctrl" recordSetVar="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<apex:form >

<script>

 function toggleDiv() {

       $("[id$=a]").toggle();

   }

   function toggleDiv1() {
        $("[id$=b]").toggle();
   }
</script>

<apex:pageBlock >
<a href="#" onclick="toggleDiv()">Uma</a>
<a href="#" onclick="toggleDiv1()">NewTable</a>
</apex:pageBlock>


<apex:outputPanel id="a"  style="display:none;">
    <apex:pageblock id="a1">
    <apex:outputLabel >UmaValue</apex:outputLabel>
    </apex:pageBlock>
</apex:outputPanel>  

<apex:outputPanel id="b" style="display:none;">
    <apex:pageblock id="b1">
    <apex:outputLabel >NewTableValue</apex:outputLabel>
    </apex:pageBlock>
</apex:outputPanel>

</apex:form>
</apex:page>

2 Answers 2

1

Looks like you forgot to add jquery file in page

Add this. It will work for you

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Also apex:commandLink will reload your VF page. I suggest you use HTML anchor tag

replace this

<apex:commandLink value="Uma" id="uma" onclick="toggleDiv()"/>
<apex:commandLink value="NewTable" id="check"/>

to

<a href="#" onclick="toggleDiv()">Uma</a>

Updates:

<apex:page standardController="Contact"  recordSetVar="">
   <apex:form >
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
      <script>
         function toggleDiv() {
                $("[id$=op]").toggle();
                $("[id$=oi]").toggle();
                $("[id$=oplink]").toggle();
                $("[id$=oilink]").toggle();
           }
      </script>
      <apex:pageBlock >
         Id: {!$CurrentPage.parameters.id}
         <a href="#" onclick="toggleDiv()" id="oplink" >Uma </a> 
         <a href="#" onclick="toggleDiv()" id="oilink" style="display:none;"> NewTable</a> 

      </apex:pageBlock>
      <apex:outputPanel id="op" >
         <apex:pageblock >
            <apex:outputLabel >UmaValue</apex:outputLabel>
         </apex:pageBlock>
      </apex:outputPanel>
      <apex:outputPanel id="oi" style="display:none;">
         <apex:pageblock >
            <apex:outputLabel >NewTableValue</apex:outputLabel>
         </apex:pageBlock>
      </apex:outputPanel>
   </apex:form>
</apex:page>
6
  • Hi @Ratan..It's working fine..But when page loads i just want to display link"Uma" alone. and one page block.then when i click it needs to be changed
    – sonu
    Commented Apr 21, 2017 at 9:45
  • @ramu you can hide the outputpanel using style="display:none;"
    – Ratan Paul
    Commented Apr 21, 2017 at 9:48
  • i have updated my code...two links are displaying.Please have a look and help me.I want to display only one link with one pageblock.When i click it the link name should be changed and display another pageblock
    – sonu
    Commented Apr 21, 2017 at 9:54
  • @ramu check my updated answer
    – Ratan Paul
    Commented Apr 21, 2017 at 9:59
  • @Ratan..Thanks.But the PAge should be displayed with Link "Uma" and pageblock "Umavalue" when it loads.When i click Uma liknk it should be changed "NewTable " Link and NewTable pageblock..I dont want to display to links...
    – sonu
    Commented Apr 21, 2017 at 10:04
0

I propose to try this function JQuery $jquery('[id$=IdPageBlock]').hide();

Or You can use rendered attribute of the apex:pageBlock. The doc https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlock.htm

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .