0

I have 3 tabs,whenever I click the tab,pageblock has to be refreshed.need your help,thanks in advance.

<apex:page id="pg" standardController="Noise_Dictionary__c" extensions="SynonymsDictionary_cls" tabstyle="Noise_Dictionary__c" >
   <script>
   function myFunction(){
   var query="select id,name from Noise_Dictionary__c"; 
    var records = sforce.connection.query(query); 
    var records1 = records.getArray('records');
   alert(records);

   }
   </script>
    <script  type='text/javascript'>
        var waitTime = 1;
        var countDown = waitTime + 1;
        var started = false;

        function resetTimer() {
            countDown = waitTime + 1;
            if (started == false) {
                started = true;
                runCountDown();
            }
        }

        function runCountDown() { 
            countDown--;
            if (countDown <= 0) {
                fetchResults();
                started = false;
            } else {
                window.setTimeout(runCountDown, 1000);
            }
        }
    </script>
    <style type="text/css">
        .activeTab {
            font-size:1.25em;
            font-style:normal;
            font-family: 'Calibri';
            font-weight:bold;
            background-color: #3090C7; 
            color:white;
            background-image:none;
            border: 2px solid #747e96;
            border-bottom: 0px solid #fff;
            border-radius: 10em 0 5em 2em;
        }
        .inactiveTab {
            background-color: #EDE3D1;
            color: #838483;
            background-image: none
            border-radius: 10em 0 5em 2em;
        }

        .exceptionText{
                                 font-style:italic;
                                 font-size:16px;
                                 font-weight:bold;
                                 text-align:center;
<apex:form id="frm">
        <apex:tabpanel id="tbp" switchType="client" selectedTab="name1" tabClass="activeTab" inactiveTabClass="inactiveTab" headerAlignment="center">
 <apex:tab label="Noise Dictionary" onclick="myFunction(); ">
                <apex:pageBlock title="Noise Words Dictionary" id="pb" >
</apex:pageBlock>

            </apex:tab>
<apex:tab id="tabId" label="Contact Dictionary" > 

              <apex:pageBlock title="Contact Dictionary" id="PageB" >
</apex:pageBlock>
</apex:tab>
 <apex:tab id="tabIds" label="Account Dictionary" >
             <apex:pageBlock title="Account Dictionary" id="PageB1" >
</apex:pageBlock>
            </apex:tab>

        </apex:tabpanel>
    </apex:form>
</apex:page>
1

Go throught the use of Render and ReRender.for help you can follow the following link -- https://developer.salesforce.com/forums/?id=906F0000000AUDnIAO

  • Please add relevant detail from the linked resource or your answer will likely be deleted. Link-only answers can break over time and are considered fragile. – Adrian Larson Jul 26 '16 at 20:01
  • @AdrianLarson sure , thanks for the warning.I will do that. – Ajay Prakash Dubey Jul 26 '16 at 20:36
0

With help of tag and onclick function on tabPanel. You can render the entire tabPanel when you click on tabs.

You have to add DummyFunc() method in controller, In actionFunction we have to pass method name for action attribute that's reason i have created dummyFunc().

 public void DummyFunc() {       
    }

Change below code in visual force page

<apex:form id="frm">
        <apex:actionFunction name="actionFunc" action="{! DummyFunc}" reRender="tbp"/>
        <apex:tabpanel id="tbp" onclick="actionFunc();" switchType="client" selectedTab="name1" tabClass="activeTab" inactiveTabClass="inactiveTab" headerAlignment="center">

            <apex:tab label="Noise Dictionary">
                <apex:pageBlock title="Noise Words Dictionary" id="pb" >
            </apex:pageBlock>                
            </apex:tab>

            <apex:tab id="tabId" label="Contact Dictionary" >                 
                <apex:pageBlock title="Contact Dictionary" id="PageB" >
                </apex:pageBlock>
            </apex:tab>

            <apex:tab id="tabIds" label="Account Dictionary" >
                <apex:pageBlock title="Account Dictionary" id="PageB1" >
                </apex:pageBlock>
            </apex:tab>

        </apex:tabpanel>
    </apex:form>

In the above actionFucntion i have passed tabPanel id for render. You can pass pageBlock id also for render you tabs eg.. reRender="PageB"

Check below working code i have tried for render you Tab

Controller : ApexTabExCntr

public class ApexTabExCntr {
    Public integer num1 {get { return ++num1; } set;}
    Public integer num2 {get { return ++num2; } set;}
    public ApexTabExCntr() {
        num1=1;
        num2=2;        
    }
    public void DummyFunc() {       
    } 
}

VisualForce Page : ApexTabEx

<apex:page showHeader="true" controller="ApexTabExCntr">  
    <apex:form >
        <apex:actionFunction name="actionFunc" action="{! DummyFunc}" reRender="AccountTabPanel"/>
        <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"  onclick="actionFunc();" >        
            <apex:tab label="One" name="name1" id="tabOne" reRender="PageA" >
                <apex:pageBlock title="Contact tabOne" id="PageA" >
                    content for tab {! num1}
                </apex:pageBlock>
            </apex:tab>
            <apex:tab label="Two" name="name2" id="tabTwo" reRender="PageB" >
                <apex:pageBlock title="Contact tabTwo" id="PageB" >
                    content for tab {! num2}
                </apex:pageBlock>
            </apex:tab>
        </apex:tabPanel>        
    </apex:form>   
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.