Recent Posts
- (02/24) Calling an Element from a Helper TAGS:CakephpWeb ProgrammingUsageTutorialExample
- (10/14) Forcing A Single Join in CakePHP PaginationTAGS:CakephpCakephp 13DatabaseErrorsHabtmMysqlMssqlWeb ProgrammingUsage
- (08/11) Inserting NOW() into MySQL Using CakePHPTAGS:CakephpDatabaseMysqlMssqlWeb ProgrammingUsage
- (08/07) Best PaginateCount for CakePHP - with Group By SupportTAGS:CakephpBehaviorsWeb ProgrammingUsageDatabaseExampleMysqlHabtmHack
- (04/03) CakePHP Error Messages Not Showing on FormTAGS:CakephpCakephp 13Web ProgrammingErrorsUsage
- (02/06) Sorting Paginated Results Using a Related Model Field in CakePHPTAGS:CakephpWeb ProgrammingUsageExample
- (11/02) Changing CakePHP's Model useTable on the FlyTAGS:CakephpWeb ProgrammingMysqlDatabaseExampleTutorial
- (10/18) The Funniest Error Message Ever - Thank You EclipseTAGS:EclipseWeb ProgrammingErrorsHumorWindowsUsageSoftwarePhpCakephp
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 1,954 times | 1 comment
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
Leave a Comment
Posted by Saudi Jobs
on 10/9/10
Nice work man.Thanks for sharing jQuery Tabs upgrade.