Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Upgrading Jquery UI Tabs and it Stopped Working
Posted on 12/09/2009 at 08:16 pm by Kevin Wentworth
Viewed 13,010 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:
- <div id="tabContainer">
- <ul>
- <li><a href="#fragment-1"><span>Page Settings</span></a></li>
- <li><a href="#fragment-2"><span>Advanced</span></a></li>
- </ul>
- <div id="fragment-1"></div>
- <div id="fragment-2"></div>
- </div>
My Javascript, before and after:
- // What worked before:
- $("#tabContainer > ul").tabs(); //note the #tabContainer > ul
- // What's working after the jquery ui upgrade
- $("#tabContainer").tabs(); //correct and working
Cheers,
-Kevin Wentworth
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!
