How to Make Drupal Quicktabs "Remember" the Last Tab on Page Refresh

With a little JavaScript you can make your QuickTabs Fergalicious!
With a little JavaScript you can make your QuickTabs Fergalicious!

It's annoying to have Drupal QuickTabs revert to the default tab on every page load. There are a number of hacks out there that require changes to default ("core") files to make the last tab get re-selected on page refresh. However, the following fix will make the last tab re-select on page load. In my particular case I had 26 tabs, labelled A through Z, which each contained the same view, but with different parameters.

At the top of the view I included a Global PHP header with the following code:

jQuery(document).ready(function() {
thing = jQuery('#quicktabs-techspec').find('.active').find('.active').attr('id');
jQuery.cookie("techspec-tab", thing);
});

..which records the active tab (from my QuickTabs named "techspec") in a cookie. Then in the Panels page, where the QuickTabs were located, I included a panel with the following code:

jQuery(document).ready(function() {
tabName = "#" + jQuery.cookie("techspec-tab");
jQuery(tabName).click();
});

...which checks that cookie and "clicks" on the anchor which represents the last-used tab, bringing it again into the foreground.

It's important to mention that every use case will have different tweaks to perform. For example, in this particular instance, I didn't want the JavaScript firing off on each and every tab, because the default tab might reset the cookie before the Panels page had a chance to read it. My quick and convenient solution was to create a 27th tab which did not have the JavaScript, and set that one to default. I suppose I could have just put a setTimeout() event in the view too, to delay the setting of the cookie for a second or two, letting the Panel grab the last-set value first.

Also, in this configuration, each tab will set the cookie only the first time it is clicked, on AJAX load. If you click back-and-forth the cookie will only retain the last "freshly-loaded" tab. But I think you get the idea.

Using this approach, and accounting for all the what-ifs, and even using sessions instead of cookies, you can come up with a solution that meets your particular use-case scenario to make your QuickTabs load the last-used tab on page refresh. Enjoy!

Tags: 

Comments

...and here's a server-side version of the same:

Here's a server-side version that stores the last tab in the $_SESSION variable - it will recall the last tab that *executed* (which is not necessarily the last on the user viewed) but in most cases that's perfectly acceptable. Put this in your Global PHP header in the view:

$_SESSION['last_tab_dashboard'] = 3;

...in this example, my view is on the 4th tab (tab number 3) of the quicktabs.

Then, on your page where you render your tabs (such as in a Panels page, for example) put the following:

$last_tab = 0;
if (isset($_SESSION['last_tab_dashboard'])) $last_tab = $_SESSION['last_tab_dashboard'];
$tabs = quicktabs_build_quicktabs('dashboard', array('default_tab' => $last_tab));
print drupal_render($tabs);

and *boom* your default tab is the "correct" one AS IT RENDERS and you don't even get the flickering of the first tab drawing first, etc. It's sublime!