direct url to a tab

I love this module and really want to implement it in my site but have come across this same barrier. In certain circumstances, I want to link to a page and have the second or third tab be active instead of the first.

I think it is pretty useful to pass the active tab as an argument in the URL, something like this: /node/23?qt_active=2 or if you were worried about your links being broken when you reorder tabs, perhaps /node/23?qt_active=user_delta_1

I have been hacking away at it this morning and think I have it working fairly well (handling both types of arguments) by doing the following, sorry my approach show my bias for doing things in php rather than js:

In the quicktabs.js file I removed the js code that found the first tab and made it active:

    .find('ul.quicktabs_tabs li:first-child').addClass('active')
    .end()

In the quicktabs.module starting at line 620, I added:

        $active = check_plain($_GET['qt_active']);
        $active = is_numeric($active) ? $tabs[$active]['bvid'] : $active;
        $active = $active ? $active : $tabs[0]['bvid'];
        foreach ($tabs as $i => $tab) {
          if ($tab['bvid'] == $active){
            $output .= '<li class = "active"><a href="#">'. $tab['title'] .'</a></li>';
          }
          else
          {
            $output .= '<li><a href="#">'. $tab['title'] .'</a></li>';
          }
        }

Is there any chance of getting this in to the module? Or something similar, I think it could be very useful for a lot of people.

Sorry, accidentally changed issue title. Changing it back.

Whoops. The code above only fixes the tabs, not the content.

Fortunately, the same thing works for the content.

Remove the js for making the first

    $(this).find('div.quicktabs').hide()
    .end()
    .find('div.quicktabs:first-child').show()
    .end()
    .find('ul.quicktabs_tabs li:first-child').addClass('active')
    .end()
    .find('ul.quicktabs_tabs li a').each(function(){
      this.myTabIndex = i++;
      $(this).bind('click', quicktabsClick);
    });

    $(this).find('ul.quicktabs_tabs li a').each(function(){
      this.myTabIndex = i++;
      $(this).bind('click', quicktabsClick);
    });

          if ($tab['bvid'] == $active){
            $output .= '<div class="quicktabs">';
          }
          else
          {
            $output .= '<div class="quicktabs" style = "display:none;">';
          }

Great! thanks for this - this was totally the next feature on my to-do list for Quick Tabs. I will review your code and hopefully get something committed by early next week.

Katherine

OK, there's a bit more to this than meets the eye. In order for this feature to be really useful, the url needs to change as you click on the different tabs. After doing some research into this, I have found that this is a non-trivial task and is best done with the jQuery History/Remote plugin. I don't want to include this plugin with the module because there are other modules including it and this is not really the way to go. There is a module called jQuery History (http://drupal.org/project/jquery_history) which provides a similar, seemlingly deprecated plugin, which could be of use if it updates itself to the History/Remote plugin instead. While I don't want a dependency on this module, I could do a check to see if it's there so that this particular feature is dependent on it. It's still a lot of work getting the tabs to work with this plugin though.
Thoughts?

Hey Katherine,
Have you or any others found another way around the issue above? If you've got any ideas, suggestions, patches, etc, I'd be glad to help troubleshoot.

Thanks,
Kelly

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

fixed, and as a little bonus QT works nicely without javascript now
(the javascript is checked from a Drupal cookie, so clear the cookies if you would like to test that)

and the direct link is:

http://example.com/mypage?quicktabs_42=2#quicktabs-42

this will open the third tab of quicktabs 42 which is on mypage page, and position (scrolls down) to the quicktabs wrapper

you can even open multiple quicktabs this way:

http://example.com/mypage?quicktabs_42=2&quicktabs_43=4#quicktabs-42

here is a working example (this will open the third tab of quicktabs-1 on the user/password page)
http://64.55.119.4/user/password?quicktabs_1=2

It is not possible to change the tab on the inner quicktabs-2 like
http://64.55.119.4/user/password?quicktabs_1=2&quicktabs_2=1
because it is an ajax loaded quicktabs and it is not yet rendered when it is targeted by the direct link. If the upper quicktabs would be a non ajax quicktabs only then it would be possible to change the tab by direct link..

and also when you are on the test site, try it with disabled javascript. It works nicely, just remember that you have to clear the cookies, after you disable the javascript..

Hi,
I am not able to get this work. The URL I am using looks like this:

http://www.mysite.com/?=content/pagename?quicktabs_1=2

Sorry I am a newbie to Drupal and PHP so not sure if I'm doing something dumb. I am under the gun on a deadline so any help soon would be greatly appreciated.

missing q
http://www.mysite.com/?q=content/pagename?quicktabs_1=2

if you do not have clean-url enabled then the correct format is http://www.example.com/?q=page

Thanks for the quick reply. My mistake, I forgot to type the q in the posting. When I enter:

http://www.mysite.com/?q=content/pagename?quicktabs_1=2

...I still get "page not found".

then http://www.mysite.com/?q=content/pagename must result also in "page not found"..

the http://www.mysite.com/?q=content/pagename part of the url must be a valid page

It's a valid page. Actually what I do is, I navigate to that page, then I paste "?quicktabs_1=2" to the end and I get the same error. Will it make a difference if it's:

http://subdomain.mysite.com/?q=content/pagename?quicktabs_1=2

I'm guessing that adding the subdomain doesn't matter. Also, to clarify, when I go the main page and hover over an inactive tab, in the browser's status bar, I see that the link is:

http://subdomain.mysite.com/?quicktabs_1=2

...which works when I click it from this page, but obviously doesn't when I just cut and paste the URL directly into a browser. I'm not sure why the full URL isn't shown.

Would it help to turn AJAX off? I noticed the arguments look different if I do (#quicktabs-1=2 instead of ?quicktabs_1=2).

http://subdomain.mysite.com/?quicktabs_1=2

...which works when I click it from this page, but obviously doesn't when I just cut and paste the URL directly into a browser. I'm not sure why the full URL isn't shown.

the tab link does not need the full url as it will not make a new page load..

try to turn off javascript in the browser (and clear the cookies), then the tab links should show the full url (which you could use as direct link to that tab)

Pasqualle, thanks for all your help BTW.

So I turned off javascript and cleared cookies (twice for good measure). The link (when I hover over the third tab) still says:

http://subdomain.mysite.com/?quicktabs_1=2

...when I hover over it. But now when I click on a tab it takes me to my home page instead of switching the tab. I can verify that javascript is off b/c the flash on my home page doesn't work and cookies have been cleared b/c I had to log back in to post this response. Thanks.

I can confirm that there are problems with disabled clean-urls. created a new issue for it: #362831: problems with disabled clean-urls
please comment on that issue if you would like to add something..
if you can enable clean-urls (?q=admin/settings/clean-urls) that would solve your problem for now, otherwise you will have to wait for a fix.

http://subdomain.mysite.com/?q=content/pagename?quicktabs_1=2

should be
http://subdomain.mysite.com/?q=content/pagename&quicktabs_1=2

notice the &, the "quicktabs_1=" is an argument in addition to the "q="

for clean urls it should be
http://subdomain.mysite.com/content/pagename&quicktabs_1=2

yes, the direct links with disabled clean-url is:

http://subdomain.mysite.com/?q=content/pagename&quicktabs_1=2

with enabled clen-url, both options work

http://subdomain.mysite.com/content/pagename?quicktabs_1=2
http://subdomain.mysite.com/content/pagename&quicktabs_1=2

you may construct the link with the l() function. (I did not tested, so there might be a typo in this code)

print( l('my direct link', 'content/pagename', array('query'=>array('quicktabs_1'=>'2'), 'fragment'=>'quicktabs-1')) );

this should automatically create the right url. Based on you clean-url setting the link will be

<a href="http://subdomain.mysite.com/?q=content/pagename&quicktabs_1=2#quicktabs-1">my direct link</a>
<a href="http://subdomain.mysite.com/content/pagename?quicktabs_1=2#quicktabs-1">my direct link</a>

moving the issue to documentation.

Hi

I'm new to quicktabs, and I thought I was reasonably confident in javascript, but am struggling with what must be obvious.

What I don't get is how to map a tab option to an internal 'path' - not a qtab, node or block. i.e. I just want to specify a path that will get loaded when the tab is clicked on. Is this so hard?

I debugged the code and found that an ajax method is being invoked, and a JSON string returned, but how do I map the qtab name to a URL. Is there something about taxonomy?

Sorry, this is must be so simple, but would appreciate your support. Also, the only docs I found were in the README which says nothing about this. Am I missing the docs somewhere else?

thanks.

how to map a tab option to an internal 'path' - not a qtab, node or block

you can't, there is no such option..

#380852: Cannot assign a QT to a path
#462092: Arbitrary Menu Callback as tab content

I want to create a menu link directly to a tab -- and I have that working -- but is there any way to stop it from jumping position to the tab wrapper and just show the page with that tab open?

Unfortunately it's a browser thing to go to the hash from the URL, you might be able to do something with jquery and a focus() when the page loads.

I *love* quicktabs... but I really need to be able to link directly to a tab page from a menu system... not the tab wrapper... I don't know jquery but I imagine that solution would be even more jumpy.

Please, anybody... it looked like there was a solution here http://drupal.org/node/266313 with comment #6 & 7... and I got that to work, briefly... but it stopped working.

from a menu system

can you tell some details why do you need that? If we know what would you like to achieve, then maybe we could find a solution or an advice.

I have quicktabs functioning as (sub)pages and I have it located inside my main content area, not in a sidebar.

I used the Jquery menu to allow a visitor to open up the menu tree, then the visitor can click to go to a subpage, which is actually a quicktab page. Clearly, it would not make sense to have the visitor go to the first subpage -- they should go to the page that they clicked on.

I think I solved the problem of linking to the quicktab, with the following:
http://URL/MY-PAGE&quicktabs_1=0?quicktabs-1 (where 0 is the first quicktab, followed by 1,2,3,etc)

not http://URL/MY-PAGE&quicktabs_1=0#quicktabs-1 (which is what was recommended in some other thread)

the hash in the one above makes it jump down to the quicktab wrapper, which is not what I want. But I discovered that changing the # to a ? makes it work correctly.

HOWEVER, that solution only worked for the FIRST block of quicktabs. The next primary menu item has another block of quicktabs for its subpages and that code DID NOT work for that.

But I discovered that this did:
http://URL/MY-PAGE&quicktabs_1=0 (where 0 is the first quicktab, followed by 1,2,3, etc)

So I don't know what is up with Quicktabs code, but that is what is working now... the first block has one pattern for linking, and the second has a different one... I don't know what problems will arise when I create a 3rd. I should add that I still have the code mentioned in http://drupal.org/node/266313 with comment #6 & 7 to the bottom of the quicktabs.js file. I don't know what it's doing if anything...

But it seems to me that this is an obvious use of Quicktabs and there should be a way to make it work easily.

I came to this thread because of some redirect problems in case of form validation errors.
I built a quick tabs block with 3 different forms and when I hit the submit button at tab 2 or tab 3, I always got redirected to tab 1 after validation errors occured.

I want to share my solution which must be included in hook_form() or hook_form_alter():

$form['#action'] = url($_GET['q'], array('query' => array('quicktabs_QUICK_TABS_ID' => QUICK_TABS_TAB_ID)));

where QUICK_TABS_ID could be '1' and QUICK_TABS_TAB_ID could be '0', '1', '2', ...

Maybe it can help others with similar problems... Now the 'strange behaviour' is away and redirection with validation errors works as expected.

@ #30: It seems that there are some difficulties with the different meaning of separators in URLs - after understanding this everything is quite easy - and hard-coding of URLs or links is bad style - better use Drupals built-in functionality url(...) or l(...) - see Drupal API for details
Quick description of the different separators in URLs:
? - separates the path ('normal' URL) from query parameters (e.g. http://www.example.com/current/path?param1=value1)
& - separates different query parameters (e.g. http://www.example.com/current/path?param1=value1&param2=value2)
# - separates query parameters from fragment ('anchor'/id where the browser should scroll to) (e.g. http://www.example.com/path?param1=value1&param2=value2#example-anchor)

I know it's bad form, but Drupal 6 forces you to hard-code in a full direct URL in the menu structure because it doesn't recognize the quicktab as an internal page.

I don't want to have to do it that way... but I need to link directly to a tab from a separate menu structure *as well as* the quicktabs menu system.

The wierdness happens because the URL for the first set of quicktabs is quite different from the URL for the second set of quicktabs. You would think it would be the same logical structure.

@ #32: Drupal's url() function gives you an option to set 'absolute' => TRUE to get (what you called) a 'full direct URL' (see API: http://api.drupal.org/api/function/url/6)

But I think there is still some confusion about the difference between the path to an internal page (like 'node/6' or 'MY-PAGE' in comment #30) and some query parameters (which is used to navigate directly to a tab in a quick tabs block). But if your solution is working well for you, than everything is fine :-)

Maybe I misunderstood your problem which could be related to http://drupal.org/node/383880?

needs documentation

Is there a change to the direct url to a specific tab protocol for Drupal 7? I can't seem to get the url structures in the examples above to work (yes, removing the "content" path as that's no longer used in 7).

I'm using quicktabs-7.x-3.0-alpha2, my quicktabs instance is using renderer=quicktabs. Clean-urls are enabled.

Trying to link directly to the 2nd tab in my instance (without using JavaScript), and none of these URLs are working:

http://my-server-address.com/drupal/pagealias?qt-qt_instance_name=1
http://my-server-address.com/drupal/?q=pagealias&qt-qt_instance_name=1
http://my-server-address.com/drupal/pagealias?qt-qt_instance_name=1#qt_instance_name
http://my-server-address.com/drupal/?q=pagealias&qt-qt_instance_name=1#qt_instance_name

Doesn't seem to matter if I turn ajax on or off, and I've tried all of these in multiple browsers.

Strange. What happens if you right click on one of the tabs and choose to open it in a new tab/window (assuming your browse provides this option)?

Doesn't work either. Right-clicking a non-active tab and opening it in a new tab/window just results in the same view. Tried this in several browsers, cleared history/cache, etc.

Doesn't seem to work with image maps.

Use case: Tab is an image; requirement is that user be able to click at a spot in the image to advance to the next tab.

same here to #38, have the latest QT and everything is working except when i want to point to a specific tab. does anyone know if the 7.3-dev works?

Direct link doesnt work for me. Latest v7 release.

I dont have cache enabled.

It seems that the module is not consequently using qt or quicktabs when it generates html elements. I hope the attached patch helps.

I confirm that this issue is related to caching. If you clear all of the performance settings, then clear your caches, run cron - you can achieve the desired feature. But still - the problem persists for users that seek for better performance (caching).

Updating the version so that the testing bot will test against the correct branch

43: quicktabs-direct-url-to-a-tab-308633-42.patch queued for re-testing.

Agreed #47. I need to use caching

Exploratus: Have you tried with the patch and caching at the same time?

Any progress to this issue. Do i use the patch or the dev version?

Please try and review the patch. It should apply to the 3.6 version. Haven't tried it against dev for a while.

#51: I tried the patch (#43) AND caching at the same time (cleared server-side cache, ran cron, cleared browser's cache, SHIFT+refresh the page, tried another browser) - unfortunately the issue is still there.

One more thing i notices is that links to tabs withing tabs do not work. And the tabs themselves do not link. Any idea

issue is still here guys. am using 7.x-3.6

Hi.

I also have quicktabs v3.6 with clean urls. This is the problem:

The URL is something like this. localhost/search-find/books/?qt-libtabs=0

• search-find/books is the node the tab is loaded
• tabs start with 0, so 1 is the next tab

I think the problem is the way the URL is structured. Is there a way to just make it /search-find/books for a tab without the /?qt-libtabs?

Thanks

Any solution to this problem?
It seems to have been introduced in the current dev-version.

When clicking a quicktab on node 1, navigating to another page (ex. node 2) and then turning back to node 1, the (earlier) clicked tab will still be selected/active. This "can" be a feature, but how to disable that feature when not needed?

AND the real problem is that this behavior overrides the direct link to a specific tab via a query-string (ex ?qt-tabs=2) as mentioned by sigkg above. The page will load the correct tab located in the query, but when fully loaded, the quicktabs instance quickly change to the earlier clicked tab therefore overriding the query.

Any1?

This is working for me with the current 3.x-dev version without the patch which no longer applies.

Note that the first quicktab maps to '0' so the URL below actually opens the second quicktab.

https://example.org/#MY-QUICKTABS-ID=1

Just a suggestion:

In js/quicktabs.js

where you have:

    44	      // Click the tab ID if a cookie exists otherwise set a cookie for
    45	      // the default active tab.
    46	      var $cookieValue = $.cookie(cookieName);
    47	      if ($cookieValue) {
    48	        $('#' + $cookieValue).click();
    49	      }
    50	      else {
    51	        $.cookie(cookieName, activeTabLinkID, cookieOptions);
    52	      }
   

Replace with:

    44	      // Click the tab ID if a cookie exists otherwise set a cookie for
    45	      // the default active tab.
    46	      var $cookieValue = $.cookie(cookieName);
    47	      if ($cookieValue) {
    48	
    49	      	//Modified - if tab is defined by URL args, jump cookie value
    50	
    51	      	var qt_name = "qt-" + wrapperID.substring(wrapperID.indexOf("-")+1);
    52		var url = location.href;
    53	  	var regexS = "[\\?&]"+qt_name+"=([^&#]*)";
    54	  	var regex = new RegExp( regexS );
    55	  	var results = regex.exec( url );
    56		console.log( results );
    57	  	if ( results == null ) {
    58	           $('#' + $cookieValue).click();
    59	  	}
    60	      }
    61	      else {
    62	        $.cookie(cookieName, activeTabLinkID, cookieOptions);
    63	      }
   

Worked fine here.

What is the status of this? It has been an issue with QuickTabs for years - is it possible to get this into the next release?

Is this issue going to be resolved?

When will there be another release of Quicktabs?

Hi,

The following seems to be working for me using Drupal 7.51 and QuickTabs 7.x-3.6:
• my quicktabs instance machine name is "mytabs"
• the page url where quicktabs block is on is "http://mysite.url/mypage"

then, http://mysite.url/mypage?qt-mytabs=3 opens the 4th tab

As confirmed by #57, #59, and #63, the current dev version allows accessing the tabs via a direct URL. It is as follows:

https://example.org?qt-mytabs=0 - 1st Tab
https://example.org?qt-mytabs=1 - 2nd Tab
etc

Instructions from #64 work perfectly for 7-3.8.