function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KevinManxKevinManx 

Tabs won't change

I'm sure I'm missing something. I've just started to try to learn how to use tab panels. I've used the very basic example in the guide:

 

<apex:page id="thePage">
   <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
      <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
      <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
   </apex:tabPanel>
</apex:page>

 I renders fine, but when the other tab is clicked on nothing happens. It won't change between tabs. Looking in the console there are 3 errors occuring.

  • Object [object Object] has no method 'hasClassName'
  • Cannot call method 'replace' of undefined
  • Cannot read property 'length' of undefined

If it matters, this is in Chrome.

 

Thanks,

Kevin

Best Answer chosen by Admin (Salesforce Developers) 
KevinManxKevinManx
Sort of solved, there looks like there is a conflict going on with other javascript.

All Answers

KevinManxKevinManx
Sort of solved, there looks like there is a conflict going on with other javascript.
This was selected as the best answer
Jason ClarkJason Clark

Hi Kevin,

 

I've run into the same thing today, when I added a little JQuery to a page that already had a working tabPanel.  Can you elaborate on how you resolved the conflict?

 

Thanks,
Jason
Jason ClarkJason Clark

Well, I've resolved it for myself, so I'll add some details for the next person.

 

I added a block of code like the following on my VF page:

 

<script>
  $(document).ready(function() {
     $('#dropdownNav').change( function() {
       if( $(this).val() != '') 
         window.location = $(this).val();
     });
  });
</script>


After which my tabPanel stopped working.  It seems that jQuery's use of $ conflicts with some javascript used by the platform.  The workaround was then to tell jQuery to play nice; this required two changes:

 

<script>
  $(document).ready(function($) {    // <- note addition of $ param; lets the ready function 'capture' $ locally
     $('#dropdownNav').change( function() {
       if( $(this).val() != '') 
         window.location = $(this).val();
     });
  });
$.noConflict();   // <- tell jQuery to restore $ to its prior value
</script>

 

 

With these changes in place, the tabPanel works correctly again, and the change() handler executes as well.

 
KevinManxKevinManx

I found the solution here.  There is a fuller explanation in the post, but the bottom line was that it was due to a jQuery conflict.

 

Add the following to the page with the tabpanel

 

<script type="text/javascript" language="javascript">
    if(jQuery) {
        jQuery.noConflict();
    }
</script>

 

I wasn't using noConflict beause thought as I wasn't using $ in my code there wouldn't be an issue. I was wrong.

 

Hope this helps.