Hi there,

I currently use tabs for displaying content in 2 different modes.
Each tab holds a page in which the user can navigate.
When the user clicks a link in the second tab, the content is reloaded (as it should be). But after the reload of the page the first tab is active.
Is it possible to determine in which tab the user was navigating and pass this information to the tabs module to make it the active tab when the page is reloaded?

Thanks in advance.

btw: Very cool and usefull module. :-)

CommentFileSizeAuthor
#5 jstools.patch1.82 KBRoberto Gerola
#2 tabs-active.patch811 bytesnedjo

Comments

patchak’s picture

Title: Howto set/get the active tab? » Howto set/get the active tab? Remember the state of tabs...

Hi there,

I actually need the same thing, cause I'm using the tabs module as the basis for navigation blocks using blockpanels and in the future mini panels module. So I think it would be great if the tabs could remember their last state.

This is pretty important for me, so I would be willing to sponsor this feature if this would take some time to implement. I know that collapsiblock remembers it's state, so I guess it would also be possible for tabs module??

Thanks,
Patchak

nedjo’s picture

Status: Active » Needs work
StatusFileSize
new811 bytes

Two ways this could be handled: on the server or on the client.

We should start by refreshing the version of the tabs plugin. The newest version includes an option for setting the active tab via a "tabs-selected" class. To use this, we would need to determine on the server side which tab is active and add the tabs-selected class to it. Proposed approach:

* introduce a new property, '#selected', for a tab page. E.g., to pre-select the 2nd tab:


  $form['example1'] = array(
    '#type' => 'tabset',
  );
  $form['example1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('One'),
    '#content' => t('First tab content.'),
  );
  $form['example1']['tab2'] = array(
    '#type' => 'tabpage',
    '#title' => t('Two'),
    '#content' => t('Second tab content.'),
    '#selected' => TRUE,
  );

* In theming of tabs, include the 'tabs-selected' class if the tab is selected.

The other approach would be to use cookies on the client. Proposed approach:

* when a tab is made active, add a cookie marking it as such
* before attaching the tabs behavior, test a given tab and if it has an active cookie give it the 'tabs-selected' class.

This could follow what we do in collapsiblock.

Probably we need both approaches.

Attach patch adds support for '#selected' => TRUE,.

patchak’s picture

Hi Nedjo, thanks for the patch, is this a patch that will remember the current tab that the user selected??

Thanks,
Patchak

nedjo’s picture

is this a patch that will remember the current tab that the user selected?

No. I looked into this a bit more. Unfortunately the current version of the tabs plugin is not compatible with the version of jQuery that ships with Drupal 5 so we can't upgrade to get the automatic recognition of the active tab through a class set on the server side (though we could add such to the tabs.js file).

Remembering the current state would be fairly straightforward through cookies as is done in collapsiblock. I'd welcome a patch.

Roberto Gerola’s picture

Status: Needs work » Needs review
StatusFileSize
new1.82 KB

patchak has sponsored this patch for his website GeekOMatik.

Author : Roberto Gerola

nedjo’s picture

Status: Needs review » Needs work

Thanks for the patch. Some suggestions:

* Instead of hard-coding the onclick event into the HTML, we should use the tabs plugin's onClick option. Follow the same approach as I've done with onShow: Drupal.tabsAddClassesCallback().

* There may be more than one active tab in memory, so the cookie should be an array of ids. Use $.merge() to merge new values. Something like:

var activeTabs = $.merge($.cookie('active-tabs') || [], [id]);

Then iterate through the array using $.each().

* Rather than adding an ID to each tab, I would prefer to use the tabs plugin's methods for identifying tabs, by index. We could then add an ID for the tabset (drawn from the name).

* We should use the tabs plugin's methods for setting the initial tab rather than invoking the click event. Ideally we would pass the active tab as an argument when invoking $().tabs().

nedjo’s picture

Rather than adding an ID to each tab, I would prefer to use the tabs plugin's methods for identifying tabs, by index. We could then add an ID for the tabset (drawn from the name).

Optional. I see that newer versions of the plugin reference tabs by ID as well as the index.

We should use the tabs plugin's methods for setting the initial tab rather than invoking the click event. Ideally we would pass the active tab as an argument when invoking $().tabs().

One option - possibly the best - would be to implement http://drupal.org/node/171234, making Tabs dependent on jQuery Update, and so have access to newer methods like setting a tabs-selected class before processing tabs.

wim leers’s picture

Assigned: Unassigned » wim leers
scottrigby’s picture

Hi,
Has this been worked on yet?
I'm JS Tools Tabs, and running into a similar problem - I'm showing a google map in one of the tabs but the map is broken until the page is refreshed. my past experience is that if the map is called first (in a javascript show/hide - i.e., not set to display: none) then it was fine. Unfortunately I don't write javascript but just try to use it where I can.

My thought was that if I set the map tab to be active in JS Tools Tabs, then it would not break. But I can't try it because the patch seems to not be in a usable state. Or is it?

Thanks for any advice/updates!
Scott

patchak’s picture

The changes proposed by Roberto have not been commited but they do work on my site without bugging. WOuld be nice to commit them, or to use that patch as a starting point.

nedjo’s picture

Category: support » feature

While it might 'work', the patch needs fixing in several ways, as I identified in my review, before it would be ready to accept. Hence the issue status. If that work is done, I'd be happy to apply the patch.

MedicSean37’s picture

Version: 5.x-0.6 » 5.x-1.0

Has there been a fix to this yet? I'm having the same problem. I tried the patch, but it didn't work for me. The onClick couldn't find the Drupal.tabsClick() method. I made sure the browser cache was clean.

patchak’s picture

The patch proposed here could be used as a base if someone wants to take the time to modify it...It was working fine for 0.6 version, but maybe is broken for latst version.

Patchak

1kenthomas’s picture

Subscribing. Using jQuery update and setting a preselect, however, seems to work.

omnyx’s picture

any updates on this?
How could one set what tab would be active on page load?

please help

wim leers’s picture

Status: Needs work » Closed (won't fix)

The Drupal 5 version of this module is no longer maintained.