When using the default jquery_ui (v.1.6), or the included jquery ui tab (v.1.6), the active tab css property is "active",
but when using jquery_ui and jquery_update 2.x-dev with jquery 1.3.2 and jquery ui 1.7.x then the active tab css property is "ui-state-active".

With this patch and the right css styling for this new ui-state-active class, it is possible to have running the tabs module with jQuery 1.7.
This patch just replace the active class with the right one in tabs.module and tabs.js depending of jquery ui version.
I have tested it with cck fieldgroup tabs and works fine viewing tabs, editing tabs and editing tabs with errors, with jquery ui 1.6 or 1.7

(By the way, D7 will include that version and it seems that jquery update with jquery 1.3.2 is in the way to be solved once some of the ugliest issues with views was solved,
this will allow start using same jquery version in D6 and D7)

CommentFileSizeAuthor
#35 tabs.JPG15.25 KBVacilando
#19 tabs_jqueryui17.patch4.96 KBjcmarco
#9 tabs_ui17_js.patch2.2 KBjcmarco
#7 tabs_js_nav_ui17.patch2.27 KBjcmarco
#6 tabs-fix.patch796 bytesiamer
#2 tabs_js_ui_1.patch1.17 KBjcmarco
#2 tabs_module_ui_1.patch699 bytesjcmarco
#2 drupal-tabs_ui_1.patch1.38 KBjcmarco
tabs_module_ui17.patch1.93 KBjcmarco
tabs_js_ui17.patch1.01 KBjcmarco
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Needs review » Needs work

Thanks for the issue details and the patch.

I'd like to find a solution that works in all circumstances rather than testing for version.

Currently we use the 'active' class because that gives compatibility with Drupal core's tabs. We designate this as the selectedClass when calling .tabs():


    .tabs({
      select: selected,
      selectedClass: 'active',
      fx: fx
    })

Maybe support for selectedClass has been deprecated? If that's the case, I guess we might need to register enable and disable callbacks when calling .tabs() to add and then remove the 'active' class.

What css is minimally needed for the ui-state-active class? I guess we need to add that too to the patch.

jmarco, are you up for doing up a revised patch?

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented
Status: Needs work » Needs review
FileSize
drupal-tabs_ui_1.patch1.38 KB
tabs_module_ui_1.patch699 bytes
tabs_js_ui_1.patch1.17 KB

I have been playing with a new version, following your recommendations.
On this version:
- active tabs assignation is only done with the ui.tabs functions,
- it is forcing a change to the same active tab css class in order to have only a css file
- this css file comes from the basic theming for ui.tabs 1.7, with some adjustments that probably will need more tuning.
- for #activated tab property, I use a neutral class that is changed in the tabs.js using ui.tabs functions to assign the right class.
- I have removed selectedClass because it was deprecated (http://dev.jqueryui.com/ticket/3691)

I have tested it with jQuery UI 1.7, 1.6 (one coming in the module), viewing tabs, editing forms and forms with errors ( I haven't yet tested it assigning #activated to a form )

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Needs review » Postponed

Thanks!

I've applied an adapted version of this patch. I don't want to add css yet; I'd like to wait for theme support to be added to jQuery UI module in #266692: Settings for the theme used by jQuery UI. When that's in, we can use the registered theme for the css.

Setting to postponed until that issue is committed.

mrfelton’s picture

mrfelton CreditAttribution: mrfelton commented

So what has been applied and what hasn't? What do I need to do to get things working with 1.7.

ps. #266692: Settings for the theme used by jQuery UI has been replaced with #388384: Allow usage of jQuery UI themes from the themeroller, and I have the patch for that applied and I have a jquery_ui theme installed and working correctly.

mrfelton’s picture

mrfelton CreditAttribution: mrfelton commented

So what has been applied and what hasn't? What do I need to do to get things working with 1.7.

ps. #266692: Settings for the theme used by jQuery UI has been replaced with #388384: Allow usage of jQuery UI themes from the themeroller, and I have the patch for that applied and I have a jquery_ui theme installed and working correctly.

iamer’s picture

iamer CreditAttribution: iamer commented
FileSize
tabs-fix.patch796 bytes

After enabling jquery update and jquery.ui update, panels tab style was not working. The attached very simple patch makes it work.

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented
FileSize
tabs_js_nav_ui17.patch2.27 KB

I updated this patch to add support to jQuery UI 1.7 with last tabs release.
- I used the most simple patch from @iamer
- adding ui-tabs-selected/active is not needed because is already added by the jQuery UI 1.7
- there is an error using tab titles for the navigation buttons titles

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Postponed » Needs work

This patch will break the current functionality of setting the 'active' class to support default drupal tab styling. Could you work up one that maintained the current functionality?

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented
Status: Needs work » Needs review
FileSize
tabs_ui17_js.patch2.2 KB

I have left the active class to add compatibility with the default drupal class.
And now, when disabling jquery update and jquery ui (with 1.3.x and 1.7.x) the tabs works the same.

For theming, in default drupal jquery you need to use the active class
and when using jquery ui 1.7.x theming then you use ui-tabs-selected

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented

Thanks for the revised patch.

A bug that appeared previously and that was fixed involved ul lists placed on tabs. Because the selector used processed all ul elements in the tabs div, lists on tabs were transformed into broken tabs.

The current patch looks like it could revive that bug, since it removes the '> ul' selector.

Could you explain why it's necessary to change the handling of the selectors and not just switch out the classes used?

Before applying this, I want to make sure it doesn't break when lists are placed on tabs. You can test this by e.g. placing a textarea on a tab and manually coding an HTML list into the textarea.

iamer’s picture

iamer CreditAttribution: iamer commented

Actually I didn't remove the "> ul" selector, I just moved it after the .tabs() invocation.
I looked at jquery.ui tabs documentation and it said to invoke the .tabs() function on the parent container that contains the tabs.
Before the patch the .tabs() function was being called on each "ul"

iamer’s picture

iamer CreditAttribution: iamer commented

Sorry for the hasty reply, I think I get what you mean , I will try the test case you mentioned and see what happens.

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented

There is an "issue", the jQuery UI Tabs in 1.6.x have a different behavior than 1.7.x.
In 1.6 the tab is applied to the ul and in 1.7 is applied in the wrapper div, so probably there will be always problems
trying to get the same js logic for the two versions.

For the D7 version is easy because it already comes with the jQuery UI 1.7.2 so the tabs.js needs this change.
But for D6 there is the possibility to have both. We could detect the jQuery UI version with jquery_ui_get_version() in the tabs_load()
changing the loaded tabs.js to some like tabs.ui17.js at this time. (or add this info to the js settings and change the js execution).

I wouldn't complicate the js logic and I will add a second tabs.js compatible with jquery.ui.1.7, that in any case it would be needed for D7.

mrfelton’s picture

mrfelton CreditAttribution: mrfelton commented

The last version of this patch (the one at #9) gets the tabs working again for me. Thanks.

john.money’s picture

john.money CreditAttribution: john.money commented

+1 jcmarco patch #9

mrgoltra’s picture

mrgoltra CreditAttribution: mrgoltra commented

subscribing

miro_dietiker’s picture

miro_dietiker
Location Switzerland
CreditAttribution: miro_dietiker commented

Works for our setup after need to upgrade to jQuery UI 1.7 ...
Confirm this to work with panels_tabs.module

Don't forget to rebuild performance cache to avoid browser caching issues in admin/settings/performance

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented

I agree with the approach of detecting jquery UI version and having a separate file for jQuery UI 1.7 and would welcome a patch.

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented
FileSize
tabs_jqueryui17.patch4.96 KB

This patch add a jquery ui version control and adds an extra js with just the jquery ui 1.7.x settings.

joostvdl’s picture

joostvdl CreditAttribution: joostvdl commented

Patch #19 is working for me!

jquery 1.3.2
jquery_ui 1.7.2

Zach Harkey’s picture

Zach Harkey CreditAttribution: Zach Harkey commented
Status: Needs review » Reviewed & tested by the community

Patch #19 is working for me too.

jquery 1.3.2
jquery_ui 1.7.2

gooddesignusa’s picture

gooddesignusa CreditAttribution: gooddesignusa commented

Patch #19 worked for me using Tabs 6.x-1.3

using
jquery 1.3.2
jquery_ui 1.7.2

Thanks a lot

clashar’s picture

clashar CreditAttribution: clashar commented

Please help,
I can't understand which patch I should apply.
There are many here.

I tried all of them, but only "tabs-fix.patch" from post #6 and "tabs_jqueryui17.patch" from post #19.
I try to apply them to Tabs module

I use:
Tabs "tabs-6.x-1.3"
jQuery UI "jquery-ui-1.7.3"
jquery "jquery_ui-6.x-1.3"

I have already spent two whole days but still can't solve the problem.

clashar’s picture

clashar CreditAttribution: clashar commented

duplicate

stoltoguzzi’s picture

stoltoguzzi CreditAttribution: stoltoguzzi commented

same here, which patch to use?

jcmarco’s picture

jcmarco CreditAttribution: jcmarco commented

#19 works with both versions of jQuery UI

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Reviewed & tested by the community » Fixed

Thanks iamer and jmarco for the patch and apologies it's taken me a long time to review.

The latest patch had a minor error; version checking should have been something like:


if (version_compare(jquery_ui_get_version(), '1.7', '>=')) {

}

But I tested with the patch at #9 and found no issues with nested lists, so I've applied that instead.

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Fixed » Needs review

Spoke too soon, patch in #9 did indeed break things--all links in lists processed as tabs. I've applied an adapted version of the patch in #19. I couldn't get jquery_ui 1.7 working so couldn't test, but it's broken as it is so I figured we may as well apply the attempted fix and work from there.

Anyone who knows how to test this: please provide exact steps from a clean Drupal install for setting up jquery_update and jquery_ui 1.7 to test. Testing of the HEAD version of tabs (which now includes this patch) would also be great. Thanks!

Vector-’s picture

Vector- CreditAttribution: Vector- commented

Since I don't see any responses to this... figured you might be interested in knowing...

The latest dev snapshot is, fundamentally at least, working with jQuery 1.4.2 and jQuery UI 1.8.2 - I have definitely not done any sort of comprehensive testing yet...
From what I can tell, API for tabs hasn't changed much from 1.7 to 1.8, so chances are pretty good it works in 1.7 too.

PS: I'm actually seeing a CSS bug that's causing multiple lines of tabs to act awkwardly, but I'm not sure the fault for that is the Tabs module...
Unless someone has this problem on anything vaguely approaching a stable setup... well, I'm going to assume it's probably a local problem ;)

Ogredude’s picture

Ogredude CreditAttribution: Ogredude commented

Patch #19 plus the change in comment #27 works for me. Thanks!

protoplasm’s picture

protoplasm CreditAttribution: protoplasm commented

Patch #19 saved the day for me. Thanks.

Zach Harkey’s picture

Zach Harkey CreditAttribution: Zach Harkey commented
Status: Needs review » Reviewed & tested by the community
NathanM’s picture

NathanM CreditAttribution: NathanM commented

Is this implemented in the dev release yet?

Vector-’s picture

Vector- CreditAttribution: Vector- commented
Version: 6.x-1.x-dev » 6.x-1.3

This was committed to dev on May 24, 2010.

Setting Version accordingly, if I'm messing this up, or if problems still exist related to this in 6.x-1.x-dev, please change it back... works for me though.

http://drupal.org/cvs?commit=371086

Vacilando’s picture

Vacilando CreditAttribution: Vacilando commented
FileSize
tabs.JPG15.25 KB

Works OK indeed, even with jQuery UI 1.8.4.

mcpuddin’s picture

mcpuddin CreditAttribution: mcpuddin commented
Version: 6.x-1.3 » 6.x-1.x-dev

@Vector - This functionality is in 6.x-1.x-dev and not in 6.x-1.3. I believe once a new release is set, anything fixed in 6.x-1.x-dev will be set to "fixed in the most recent version".

If i'm wrong for setting this back to 6.x-1.x-dev, someone please scold me sharply

davidwhthomas’s picture

davidwhthomas CreditAttribution: davidwhthomas commented

tabs 6.x-1.x-dev fixed the issue here too, thanks.
jquery: 1.3.2
jquery_ui: 1.7.x
DT

drupalninja99’s picture

drupalninja99 CreditAttribution: drupalninja99 commented

works great, thx!

lpalgarvio’s picture

lpalgarvio CreditAttribution: lpalgarvio commented

subscribing

nedjo’s picture

nedjo
he/him/his
Primary language English
CreditAttribution: nedjo commented
Status: Reviewed & tested by the community » Fixed

This appears to be fixed.

Need to roll a new release.

podarok’s picture

podarok
🇺🇦 he/him/his
Primary language Ukrainian
Location Ukraine
CreditAttribution: podarok commented
Status: Fixed » Reviewed & tested by the community

Working for me with 6.x-dev
http://drupal.org/node/239151

jquery_update
http://drupal.org/node/779956
+
jquery_ui http://drupal.org/node/906160
with
http://code.google.com/p/jquery-ui/downloads/detail?name=jquery-ui-1.7.3...

+ cck_fieldgroup_tabs
http://drupal.org/node/696798

mostly stable - can be 6.x-1.3

tested on Opera 11, 10.63
Firefox
IE8
Chrome

miro_dietiker’s picture

miro_dietiker
Location Switzerland
CreditAttribution: miro_dietiker commented
Status: Reviewed & tested by the community » Fixed

podarok
So if this works, this is not RTBC but much more fixed state. Reverting back.

podarok’s picture

podarok
🇺🇦 he/him/his
Primary language Ukrainian
Location Ukraine
CreditAttribution: podarok commented
Status: Fixed » Needs review
Issue tags: +jQuery, +tabs, +views

with this patch there is a problem with views UI tabs
but possible it is a views bug (views used very old jquery tabs.js)

miro_dietiker’s picture

miro_dietiker
Location Switzerland
CreditAttribution: miro_dietiker commented
Status: Needs review » Fixed

Then it (the patch) doesn't need review (because it was committed) but it much more needs work or the topic is active.

If however it is not fixed, you need to describe exactly how to reproduce the issue your talking about.
In any other case an open issue doesn't make any sense.

rjl’s picture

rjl CreditAttribution: rjl commented

Not sure if you are still needing comments, but I am using tabs with some custom code and it is working for me.
- tabs 6.x-1.x-dev
- jquery: 1.3.2
- jquery_ui: 1.7.x

Thanks to all

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

zazinteractive’s picture

zazinteractive CreditAttribution: zazinteractive commented

Thanks for #19