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
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

badawy - September 18, 2008 - 10:01

what I mean is that when I open the page a tab other than the first one is opened

any help is appreciated,

#2

aaustin - September 18, 2008 - 14:04
Title:direct url to a tab» I need this too

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

aaustin - September 18, 2008 - 13:59
Title:I need this too» direct url to a tab

Sorry, accidentally changed issue title. Changing it back.

#4

aaustin - September 18, 2008 - 14:44

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

katbailey - September 18, 2008 - 19:47

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

katbailey - September 19, 2008 - 18:35

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

kwgossett - October 21, 2008 - 04:15

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

Pasqualle - December 8, 2008 - 03:10
Version:6.x-1.0-beta1» 6.x-2.x-dev
Category:support request» feature request

#9

Pasqualle - December 10, 2008 - 19:49
Status:active» fixed

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

#10

Pasqualle - December 11, 2008 - 00:55

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

Pasqualle - December 11, 2008 - 01:10

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

System Message - December 25, 2008 - 01:12
Status:fixed» closed

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

#13

malancheril - January 22, 2009 - 18:56

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

Pasqualle - January 22, 2009 - 19:03

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

malancheril - January 22, 2009 - 19:53

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

Pasqualle - January 22, 2009 - 20:15
Category:feature request» support request
Status:closed» active

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

#17

malancheril - January 22, 2009 - 20:33

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

Pasqualle - January 22, 2009 - 21:02

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)

#19

malancheril - January 22, 2009 - 21:20

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

Pasqualle - January 22, 2009 - 21:52
Status:active» fixed

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

System Message - February 5, 2009 - 22:00
Status:fixed» closed

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

#22

dlumberg - March 21, 2009 - 14:45

#23

Pasqualle - March 21, 2009 - 16:48
Component:Miscellaneous» Documentation
Category:support request» task
Status:closed» active

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.

#24

bluffit - June 27, 2009 - 01:55
Title:direct url to a tab» qtab -> url

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

Pasqualle - June 27, 2009 - 03:29
Title:qtab -> url» direct url to a tab

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

#26

tchopshop - October 28, 2009 - 17:25

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

dlumberg - October 28, 2009 - 19:01

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

tchopshop - October 29, 2009 - 00:47

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

Pasqualle - October 29, 2009 - 01:42

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.

#30

tchopshop - October 30, 2009 - 01:41

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

M_Z - November 5, 2009 - 22:49

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)

#32

tchopshop - November 6, 2009 - 18:15

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

M_Z - November 10, 2009 - 09:20

@ #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?

 
 

Drupal is a registered trademark of Dries Buytaert.