1

I have a visuaforce page with jquery tabs.I had to use to Jquery tabs as browser hangs when google charts are used with apex:tabpanel.But these jquery tabs works great if there is no apex:pageblocksection around it.

<apex:page standardController="Account">
<html lang="en">
 <head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"/>
  <script>
   var j$ = jQuery.noConflict();
 j$(function() {
j$( "#tabs" ).tabs();
 });
   </script>
<!--  <script type="text/javascript">
 (function($) {
    $(function() {
        $("#accordion > div").accordion({ header: "h3", collapsible: true });
    })
})(jQuery);
 </script> -->
</head>
<body>
  <apex:pageBlock title="Summary">
  <apex:pageBlockSection columns="2" title="SDetails - Who is receiving funding on this series?" id="secGranteeDetails"> 
 <div id="accordion">
  <div> 
  <!-- <h3><a href="#">SDetails - Who is receiving funding on this series?</a></h3> -->
   <div id="tabs">
 <ul>
  <li><a href="#tabs-1">Tab1</a></li>
  <li><a href="#tabs-2">Tab2 </a></li>
  <li><a href="#tabs-3">Tab3 </a></li>
 </ul>
<div id="tabs-1">
<apex:include pageName="vfpage1"/>  </div>
<div id="tabs-2">
 <apex:include pageName="vfpage2"/>  </div>
 <div id="tabs-3">
  <apex:include pageName="vfpage3"/> 
 </div>
 </div>
  </div>
 </div>
 <script>twistSection(document.getElementById("{!$Component.accordion}").childNodes[0].childNodes[0]); </script>  
</apex:pageblockSection>  
</apex:pageBlock>

Improve this question
2
  • What do you mean by "not working"? Does your page render the markup for the tabs correctly but not apply the styles appropriately giving it have a tabbed appearance?
    – Mark Pond
    Jan 30, 2014 at 18:11
  • I am getting tabbed appearance but the content of all tabs displays on the right side of the page
    – sfdc
    Jan 30, 2014 at 18:27

2 Answers 2

Reset to default
2

jQuery can conflict with Visualforce Javascript. You should set jQuery to a new variable with noConflict:

var j$ = jQuery.noConflict();
Improve this answer
6
  • It doesn't helped me even after adding var j$ = jQuery.noConflict();
    – sfdc
    Jan 30, 2014 at 18:48
  • you need to replace every $ with j$
    – greenstork
    Jan 30, 2014 at 19:10
  • I did that and no change.
    – sfdc
    Jan 30, 2014 at 19:14
  • If I remove the pageblocksection then it is working
    – sfdc
    Jan 30, 2014 at 19:18
  • You should post that as an answer
    – greenstork
    Jan 30, 2014 at 19:22
1

A couple of things:

  1. Your <apex:pageBlockSection> specifies that it will have two child elements per row and your markup implies that you will only have one visible child element in the <apex:pageBlockSection> - the div with the id of 'accordion'. Change the columns attribute to 1, so that the one visible child element, your tabs, can take the entire width of the page.
  2. The inline script block which calls the twist script should be removed or corrected because it is invalid for the rest of your markup.

To recap, your pageblock will look like this:

<apex:pageBlock title="Summary">
    <apex:pageBlockSection columns="1" title="SDetails - Who is receiving funding on this series?" id="secGranteeDetails">
        <div id="accordion">
            <div>
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Tab1</a>
                        </li>
                        <li><a href="#tabs-2">Tab2 </a>
                        </li>
                        <li><a href="#tabs-3">Tab3 </a>
                        </li>
                    </ul>
                    <div id="tabs-1">
                        <apex:include pageName="vfpage1" />
                    </div>
                    <div id="tabs-2">
                        <apex:include pageName="vfpage2" />
                    </div>
                    <div id="tabs-3">
                        <apex:include pageName="vfpage3" />
                    </div>
                </div>
            </div>
        </div>
    </apex:pageblockSection>
</apex:pageBlock>

{!$Component.accordion} isn't valid for your markup and should be corrected. You should consider moving it so that it is not a direct child of the <apex:pageBlockSection> tag, which will cause another row to be rendered in the table for markup which is not visible to the user:

<script>
    twistSection(document.getElementById("{!$Component.accordion}").childNodes[0].childNodes[0]);
</script>
Improve this answer
4
  • Content of Tab1,Tab2,Tab3 are displaying under Tab1 similarly on Tab2 and Tab3.
    – sfdc
    Jan 30, 2014 at 20:33
  • If you remove the <apex:include markup from the tab divs, does it render correctly (with empty tab bodies)?
    – Mark Pond
    Jan 30, 2014 at 20:33
  • If I remove Include mark and then added standard text like 111,222,33 under each tab then tabs are working
    – sfdc
    Jan 30, 2014 at 20:37
  • Is the HTML that is in 'vfpage1', 'vfpage2' and 'vfpage3' just fragments of markup or is it a full HTML page body? It sounds like you're rendering one HTML page with three other complete HTML page structures within it and the browser and jQuery are not dealing with that (invalid) markup well.
    – Mark Pond
    Jan 30, 2014 at 22:05

You must log in to answer this question.

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