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> 

  • 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 '14 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 '14 at 18:27
2

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

var j$ = jQuery.noConflict();
  • It doesn't helped me even after adding var j$ = jQuery.noConflict(); – sfdc Jan 30 '14 at 18:48
  • you need to replace every $ with j$ – greenstork Jan 30 '14 at 19:10
  • I did that and no change. – sfdc Jan 30 '14 at 19:14
  • If I remove the pageblocksection then it is working – sfdc Jan 30 '14 at 19:18
  • You should post that as an answer – greenstork Jan 30 '14 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>  
  • Content of Tab1,Tab2,Tab3 are displaying under Tab1 similarly on Tab2 and Tab3. – sfdc Jan 30 '14 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 '14 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 '14 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 '14 at 22:05

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.