CODEWITHSUNDEEP
jqueryjquery-uitabsvisualforce
sonjarae
sonjarae

Reputation: 31

jQuery/Visualforce Tabs not loading

I have been spinning my wheels and looking for answers for a while now so I thought I'd post.

Trying to add simple JQuery tabs to a visualforce page and I have verified that jquery and jquery ui is loading. I have done this in the past and can't remember was the "gotcha" was. Any ideas?

Here's my simple code:

<code>
<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" doctype="html-5.0" cache="false">
<head>
</head><apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
</head>
<body>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>       
      <div id="tabs-1">
        <p>Content for tabs-1</p>
      </div>
      <div id="tabs-2">
        <p>Content for tabs-2</p>
      </div>
      <div id="tabs-3">
        <p>Content for tabs-3</p>
      </div>      
    </div>

</body>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery( "#tabs" ).tabs();
    });
</script>
</apex:page>
</code>

Upvotes: 3

Views: 1036

Answers (1)

Nope
Nope

Reputation: 22339

I think you might need to update your jQuery references. The mix you have included doesn't seem to work.

Using your's with jQuery 1.6.4 and jQuery UI 1.8.7 causes the content for all tabs to be displayed on all tabs.

DEMO - Using your references, tabs always show all content

Try using the references as used in the jQuery UI DEMO page instead.

http://code.jquery.com/jquery-1.8.3.js  
http://code.jquery.com/ui/1.9.2/jquery-ui.js  
http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css

DEMO - Tabs working with references from DEMO

HTML from DEMO:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for tabs-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for tabs-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for tabs-3</p>
  </div>
</div>

Script

jQuery.noConflict();
jQuery(document).ready(function () {
  jQuery("#tabs").tabs();
});

Upvotes: 2

Related Questions