Upgrading Jquery UI Tabs and it Stopped Working

Posted on 12/09/2009 at 08:16 pm by Kevin Wentworth
Viewed 12,689 times | 0 comments

I was upgrading the version of Jquery UI that I use with Site Avenger.  The last time I was in a rush, nothing seemed to work and I rolled the changes back.  This time, I took the time and decided to finally make this Jquery UI upgrade happen.  This time everything went swell, except my Jquery UI tabs plugin stopped working.  WTF?

Read the Jquery UI Upgrade Guide

In my search on Google for 'upgrading jquery ui tabs stopped working' I came across a nifty little support document from the Jquery UI team- read it here.  It details upgrading from older versions of Jquery UI to the current 1.7.2 release.  I was using Jquery UI 1.6rc2 so it was time to upgrade.

Jquery UI Tabs Changed the Way you Select the Tabs Container

Jquery UI Tabs now requires a container for list AND panels! Instead of directly targeting a UL (with the li's containing your panels) you must now target the containing div for both the ul and the div's. thus can no longer tabify a UL directly.

My HTML source:

  1. <div id="tabContainer">
  2.     <ul>
  3.         <li><a href="#fragment-1"><span>Page Settings</span></a></li>
  4.         <li><a href="#fragment-2"><span>Advanced</span></a></li>
  5.     </ul>
  6.     <div id="fragment-1"></div>
  7.     <div id="fragment-2"></div>
  8. </div>

My Javascript, before and after:

  1. // What worked before:
  2. $("#tabContainer > ul").tabs(); //note the #tabContainer > ul
  4. // What's working after the jquery ui upgrade
  5. $("#tabContainer").tabs();  //correct and working

-Kevin Wentworth

Bookmark and Share

Tags for Upgrading Jquery UI Tabs and it Stopped Working

Jquery | Site Avenger | Upgrade | Web Programming

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design