direct url to a tab
badawy - September 15, 2008 - 11:57
| Project: | Quick Tabs |
| Version: | 6.x-2.x-dev |
| Component: | Documentation |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Hello All
I am new to drupal. I have created a quicktab & now I want to access a specific tab directly through the URL is it possible ??
regards

#1
what I mean is that when I open the page a tab other than the first one is opened
any help is appreciated,
#2
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.
#3
Sorry, accidentally changed issue title. Changing it back.
#4
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 of content active in quicktabs.js, so this
$(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);
});
Becomes:
$(this).find('ul.quicktabs_tabs li a').each(function(){this.myTabIndex = i++;
$(this).bind('click', quicktabsClick);
});
As a side note, I realize, there must be a way to give the default tab and content div an additional class and have the js find that class (as opposed to first-child), and make that active, which would probably be a better use of jquery. However my js / DOM / CSS skills are not so good.
Then around line 635 (my line numbers changed with the code from 2 comments up):
if ($tab['bvid'] == $active){$output .= '<div class="quicktabs">';
}
else
{
$output .= '<div class="quicktabs" style = "display:none;">';
}
#5
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
#6
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?
#7
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
#8
#9
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-42this 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#10
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..
#11
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..
#12
Automatically closed -- issue fixed for two weeks with no activity.
#13
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.
#14
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#15
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".
#16
then
http://www.mysite.com/?q=content/pagenamemust result also in "page not found"..the
http://www.mysite.com/?q=content/pagenamepart of the url must be a valid page#17
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).
#18
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)
#19
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.
#20
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.
#21
Automatically closed -- issue fixed for 2 weeks with no activity.
#22
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
#23
yes, the direct links with disabled clean-url is:
http://subdomain.mysite.com/?q=content/pagename&quicktabs_1=2with enabled clen-url, both options work
http://subdomain.mysite.com/content/pagename?quicktabs_1=2http://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.
#24
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.
#25
you can't, there is no such option..
#380852: Cannot assign a QT to a path
#462092: Arbitrary Menu Callback as tab content
#26
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?
#27
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.
#28
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.
#29
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.
#30
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.
#31
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¶m2=value2)
# - separates query parameters from fragment ('anchor'/id where the browser should scroll to) (e.g. http://www.example.com/path?param1=value1¶m2=value2#example-anchor)
#32
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.
#33
@ #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?