0

Here is what I am trying to achieve:

I have a two tabs defined as below:

<div id="Tabs"> 
    <ul class="nav nav-tabs" id="tabs">
        <li id="li_tab1"  ><a href="#tab1"><strong> Tab1</strong></a></li>
        <li id="li_tab2" ><a href="#tab2"><strong> Tab2</strong></a></li>
    </ul>
</div>

Now on click of this I want to reload my pageblocksection or outputpanel

<apex:pageblock id="root">
<apex:pageblocksection>
    <apex:outputpanel>
    </apex:outputpanel>
</apex:pageblocksection>
</apex:pageblock>

I have tried this :

$('#li_tab1').click(function(e) { e.preventDefault(); console.log('remove 2 and add 1'); jsFunctionforpp(); }); 

This is my actionfunction:

<apex:actionFunction name="jsFunctionforpp" action="{!apexMethodforpp}" reRender="root"/>

I tried rerendering the pageblocksection or a outputpanel. But it does not work.

  • did you try to write any code for onclick event? whats the issue you are facing? – Santanu Boral Apr 20 '17 at 14:59
  • Yes I tried jquery: $('#li_tab1').click(function(e) { e.preventDefault(); console.log('remove 2 and add 1'); jsFunctionforpp(); }); – Shweta Soparkar Apr 20 '17 at 15:00
  • This is my action fuction which rerenders the pageblock <apex:actionFunction name="jsFunctionforpp" action="{!apexMethodforpp}" reRender="root"/> I tried rerendering the pageblocksection but it is not working. – Shweta Soparkar Apr 20 '17 at 15:03
  • update your question with your code – Santanu Boral Apr 20 '17 at 15:04
0

Providing you a sample code. Hope this help.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

  <title>Page on Tab</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.css')}" />
  <apex:includeScript value="{!URLFOR($Resource.jquery)}" /> 

    <script>

    function tabcall(){

    methodcall();

    }
        function selectTab(elmnt) {
            // slds-active
            $(elmnt).parent("li").siblings(".slds-active").removeClass("slds-active");
            $(elmnt).parent("li").addClass("slds-active");

            // tabindex
            $(elmnt).parent("li").siblings().children("a").attr("tabindex", -1);
            $(elmnt).attr("tabindex", 0);

            // aria-selected
            $(elmnt).parent("li").siblings().children("a").attr("aria-selected", false);
            $(elmnt).attr("aria-selected", true);

            // hiding previouly selected tab (slds-show/slds-hide)
            $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").addClass("slds-hide");
            $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").removeClass("slds-show");
            // displaying newly selected tab (slds-show/slds-hide)
            $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").addClass("slds-show");
            $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").removeClass("slds-hide");
        }
    </script>
<apex:form id="mainSec1">
    <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
        <apex:param name="firstParam" assignTo="{!state}" value="" />
    </apex:actionFunction>
    <div class="slds-tabs--default">

      <!-- TABS -->
      <ul class="slds-tabs--scoped__nav" role="tablist">
        <li class="slds-tabs--scoped__item slds-text-title--caps slds-active" title="Tab 1" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item" onclick="selectTab(this);tabcall();">Tab 1</a></li>
        <li class="slds-tabs--scoped__item slds-text-title--caps slds-active" title="Tab 2" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item" onclick="selectTab(this);tabcall();">Tab 2</a></li>
        <li class="slds-tabs--scoped__item slds-text-title--caps slds-active" title="Tab 3" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item" onclick="selectTab(this);tabcall();">Tab 3</a></li>
        <li class="slds-tabs--scoped__item slds-text-title--caps slds-active" title="Tab 4" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-4" id="tab-scoped-4__item" onclick="selectTab(this);tabcall();">Tab 4</a></li>
      </ul>


    <apex:actionFunction name="methodcall" rerender="outpanel">
    </apex:actionFunction>
      <!-- TAB 1 -->
      <div id="tab-scoped-1__item" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">
        Tab One Content
      </div>

      <!-- TAB 2 -->
      <div id="tab-scoped-2__item" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">
        Tab Two Content
      </div>

      <!-- TAB 3 -->
      <div id="tab-scoped-3__item" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">
        Tab Three Content
      </div>

      <div id="tab-scoped-4__item" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-4__item">
        Tab Four Content
      </div>
      <div>
      <apex:outputPanel id="outpanel">
      Hello! Tab
      </apex:outputPanel>
      </div>

  </div>

</apex:form>
</apex:page>
  • Shweta Soparkar Please let me know if it is working – Subhasis Kar Apr 20 '17 at 15:52
  • I would like to refresh the component not just render it. I am able to render it using my logic but I am not able to refresh it. I am trying to refresh it because I am using a data grid and data grid wont get values unless and untill its a refresh. – Shweta Soparkar Apr 20 '17 at 16:15
  • You need to refreshed data when you clicked on any of the tab. is that correct?? – Subhasis Kar Apr 20 '17 at 16:27
  • yes thats correct!! – Shweta Soparkar Apr 20 '17 at 17:09
  • Then definetly you need to call a method onclick on tab and when you call that mthod on click, it will return you a list of record. That list will be refresh list, so data that will be displayed in vf pge are refreshed data – Subhasis Kar Apr 20 '17 at 17:35

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.