Create D7 version

I am not sure about this one. As jquery UI made it into Drupal core, we should fully leverage its functionality.

from the demo and docs as I see it is more flexible than the current quicktabs js, so it would be a shame to go with a simple port.
http://jqueryui.com/demos/tabs/
http://docs.jquery.com/UI/Tabs

are you coming to Paris?

First crack at a Drupal 7 version of quicktabs. No changes to JS are included in this patch, just DBTNG changes and other misc changes to the Drupal API.

Patch against HEAD and re-rolled D7 module attached.

Note: relatively untested.

Files are missing one comment line that was accidentally removed.

Re-attached.

Thanks for the help Ryan. The main problem with your version is, that it does not use the latest code. Function like "quicktabs_aj_form" was removed long time ago.. The HEAD branch is deprecated, the latest D6 code is in DRUPAL-6--2 branch..

I also started to work on the D7 version, you can download my latest code here: [EDIT: download link removed]
only the admin UI works.. and no views, as the views module is not ready for D7..

I would like to make a solid base for quicktabs, so my next goal is to make them exportable with using #535122: Integrate CTools export.inc into core for declaring instances of objects

My other big plan is to use ctools for tab content configuration and tab content display, but that module is also not ready for D7, so I just want to be sure that I can switch to it later..

Feel free to work on the required changes to display a quicktab, with or without jQueryUI, or post any bugs and suggestions..

I don't use the quicktabs module myself, I just picked a random #D7CX-tagged module and went for it. Hopefully there is something of use in the patch I contributed. I'm afraid this is the extent to which I can contribute at this time.

No problem, but you should really use this module in the future ;)

just another ref link: #544418: Integrate CTools AJAX framework with Drupal to extend (and replace) existing ahah framework

I will commit the code tomorrow, just want to finish the changes on the admin interface..

The straight D7 port of the 6.x-2.x admin interface is committed into DRUPAL-7--2 branch. The admin interface works.. Katherine please work with this code, only the quickab rendering is missing (don't make improvements to admin interface).

I did not commit my latest code as it is totally broken now. Trying to make the quicktab object and the UI more flexible, something like the views UI. Will post the code later, but probably will have to port ctools first, as the code getting more and more complex with every step..
Attached image is not from the latest version, but it shows the new (but not final) interface.

I think we need to find a better name for quicktabs instance, because I need to make a difference between "1 quicktabs" and "2 quicktabs", the first should be singular and the second should be plural name of quicktabs instance..
probably a "QTabControl" or something http://msdn.microsoft.com/en-us/library/system.windows.forms.tabcontrol....

I think the version does not really matter, I just followed the habit of other module maintainers (like views for D6). It is possible to re-start from 1 for Drupal 7, but it is also possible to continue the version from the previous Drupal version.. I think the later is more common, for example cck 7-2.x or admin_menu 7-3.x for D7.

So on the screenshot every small gray box is a different form, and all boxes have 1 common template and the whole page has 1 template. This page on the screenshot almost worked, just the "tabs" box gave me a headache. It did not work with the old ajax form submit call (reset all other forms), nor with the new ajax callback (the tabs table should be replaced, but there is no theme function for the table (the add tab button is part of the theme function), or the replace would work with rendering a form, but the build_form('tabs_table', $tabs) do not work inside ajax call, and it is not easy to modify the actual form to insert or remove one tab from the table). So after trying several options which did not work, I decided to rewrite the UI as the views UI works, to fix the tabs box problem and also to make the UI even more flexible. But the views UI uses plugins to display the options form for every item (when you click on it), the views UI functionality is not from ctools, but it is the same plugins functionality. So after reading the views UI functionality, and started to implement it, I just saw that it will be too much code, and most of it would be a duplication of ctools plugins..
And also if we want different tab content types, we should use ctools, as it has all our current content types: block, node and view with better settings (like display node comments with nodes is a setting in ctools), and it also has panels.
And the export also needs ctools, as I see the export functionality is not getting committed to D7.

So ctools should make the QT module more modular and maybe even smaller with more functionality..

the BLOCK_NO_CACHE constant was removed today
#495968: Introduce drupal_render() cache pattern. Start using it for blocks
http://cvs.drupal.org/viewvc.py/drupal/drupal/modules/block/block.module...

it is called DRUPAL_NO_CACHE now

no need to call install/uninstall schema
#306151: Automatically install/uninstall schema

http://drupal.org/cvs?commit=276256
The module works with Drupal HEAD

I'd just like to note that none of the D7 versions are visible on your project page (http://drupal.org/project/quicktabs). You'll get more testers if we don't have to go through CVS to find your D7 port. Apparently there's a "Show snapshot release on project page" checkbox that needs to be checked for it to show up.

Thanks for all the work you do!

You do not need CVS. It is available on the releases page:
http://drupal.org/node/214362/release?api_version%5B%5D=103

katbailey: As you are working on the code, there are some serious issues outstanding with the drupal 6 version. If you could please have a look at them while you are working on it?

The biggest onces are probably

#547586: All tab links get "active" attribute
#909410: Quicktabs 6.x-2.0-rc5 breaks Ajax tabs
#354867: SEO: Add Canonical Tags to Quicktab Pages
#971678: Allow users to set the parameter name for each tab

#923142: Hide empty Tab for tab-type = Block
#984430: Empty PHP code shows Tab
#766924: Quick Tabs block does not hide when there's no content

Also note that drupal_add_css and drupal_add_js have changed in Drupal 7. You need to manually set the correct group while adding it and you need to set preprocess to true if you want to make css/js aggregation working on quicktabs.

Basically the whole thing about the url created by quicktabs is pretty ... suboptimal. There should be a way to set the #name and even if there are a lot of nested quicktabs it could be circumvented with requiring the name to be unique inside the tabs or auto-rename the duplicated sub-names to something like #mytab ( for the first occurence ) and #mytab0 for a tab with same name in a nested QT.

Also the problem that an empty tabs are not recognized is very annoying.

You may have a look at http://drupal.org/project/cck_fieldgroup_tabs It has the #myname thing working and properly detects empty tabs.

Umm, dude. This is not the way to motivate someone to get things done. Each of those has a separate issue to track it's progress, right? So why not let them each stand on their own? There's nothing more demotivating than to be close to a finish line and have someone shove a wheelbarrow full of plastic donuts in your way...

@Xian: Don't be a jerk. This ticket is for D7, any D6 issues are completely off-topic.

I just wanted to bring some ghosts from the past back to the light to be considered for the drupal 7 version. Sorry if i sounded rude there, it was def. not my intent. Not at all :(

http://drupal.org/node/991610 there is also this version - 3.x - working with views

I have been trying to get Quick Tabs to work on a new Drupal 7 installation but have had a number of problems. I am very inexperienced with Drupal and have only limited (non-OOP) php knowledge. The first problem I ran into was the error:

Fatal error: Call to undefined function db_fetch_object() in .../sites/all/modules/quicktabs/quicktabs.module on line 192

After a quick search, I found http://drupal.org/update/modules/6/7#dbtng and changed line 192 from

while ($quicktab = db_fetch_object($result)) {

to

foreach ($result as $quicktab) {

which solved that but then gave the following error

Fatal error: Cannot use object of type stdClass as array in .../sites/all/modules/quicktabs/quicktabs.module on line 193

Looking at the link suggested changing line 93 from

$quicktabs[$quicktab['machine_name']] = _quicktabs_unpack($quicktab);

to

$quicktabs[$quicktab->machine_name] = _quicktabs_unpack($quicktab);

This got rid of that error and I was able to create a Quicktab, but I then started getting the following Druapl errors:

# Notice: Undefined variable: quicktabs in quicktabs_list() (line 49 of .../sites/all/modules/quicktabs/includes/admin.inc).
# Notice: Trying to get property of non-object in quicktabs_list() (line 49 of .../sites/all/modules/quicktabs/includes/admin.inc)

I haven't been able to solve them. Whilst there is a value in the machine_name field in the quicktabs table in the Drupal database, it does not seem to be retrieved. I suspect due to my lack of php knowledge. Can anyone help solve the next problem?

katbailey, thank you very much for the quick response. I have updated the module and error messages have gone. I wonder whether there is still a problem, however: should there be anything in the "Operations" column in the Edit Quicktab screen? There isn't in my setup, see attached screenshot.

I am struggling a bit understanding how content appears under each QuickTab; this may not be helped by the empty Operations column! I can get blocks to show up in the Quick Tab but they are not under the tab I was expecting them to be under! I'll keep trying.

That is probably a disabled javascript in the browser, or a javascript error. Try the module as D7+QT only and check if the problem still exists.

As to setup. Copying some set up details from Drupal's Status report: Server is running Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 mod_bwlimited/1.4, MySQL 5.0.91-community, php 5.2.16. It's a Linux server.

I've tried the site with both Firefox 3.6 and IE 8 on a couple of computers, one running XP Pro SP3 and the other Windows Server 2003.

I've disabled all non-core modules other than Quick Tabs, but it makes no difference.

By looking at the source code of the page, it appears that multiple columns are being output for each body row for the selection of block, node or quicktab (none of these show up in the browser, presumably because of them being extra table cells). In admin.inc it indicates that these are controlled in quicktabs_form.js, but my Javascript knowledge is non-existent, so I can't comment further.

An example of of the table header and first row is:

<thead><tr><th>Tab title</th><th>Tab weight</th><th>Tab type</th><th>Tab content</th><th>Operations</th> </tr></thead>
<tbody>
 <tr class="draggable odd"><td class="qt-tab-title"><div class="form-item form-type-textfield form-item-tabs-0-title">
 <input type="text" id="edit-tabs-0-title" name="tabs[0][title]" value="EJMS JPP" size="10" maxlength="128" class="form-text" />
</div>
</td><td class="qt-tab-weight"><div class="form-item form-type-select form-item-tabs-0-weight">
 <select class="qt-tabs-weight form-select" id="edit-tabs-0-weight" name="tabs[0][weight]"><option value="-100" selected="selected">-100</option> LOTS OF OPTIONS REMOVED! <option value="100">100</option></select>
</div>
</td><td class="qt-tab-type"><div id="edit-tabs-0-type" class="form-radios"><div class="form-item form-type-radio form-item-tabs-0-type">
 <input type="radio" id="edit-tabs-0-type-block" name="tabs[0][type]" value="block" checked="checked" class="form-radio" />  <label class="option" for="edit-tabs-0-type-block">Block </label>
 
</div>
<div class="form-item form-type-radio form-item-tabs-0-type">
 <input type="radio" id="edit-tabs-0-type-node" name="tabs[0][type]" value="node" class="form-radio" />  <label class="option" for="edit-tabs-0-type-node">Node </label>
 
</div>
<div class="form-item form-type-radio form-item-tabs-0-type">
 <input type="radio" id="edit-tabs-0-type-qtabs" name="tabs[0][type]" value="qtabs" class="form-radio" />  <label class="option" for="edit-tabs-0-type-qtabs">QTab </label>
 
</div>
</div></td><td class="qt-tab-content qt-tab-block-content"><div class="form-item form-type-select form-item-tabs-0-block-bid">
  <label for="edit-tabs-0-block-bid">Select a block </label>
 <select id="edit-tabs-0-block-bid" name="tabs[0][block][bid]" class="form-select"><option value="block_delta_8">Current Issue (block:8)</option><option value="block_delta_5">EJMS Feature 3 (block:5)</option><option value="block_delta_2" selected="selected">EJMS JPP (block:2)</option><option value="block_delta_6">EJMS OA Feature (block:6)</option><option value="block_delta_3">Features (block:3)</option><option value="block_delta_12">Front page blurb (block:12)</option><option value="block_delta_11">Frontpage slideshow (block:11)</option><option value="block_delta_4">Honour for Peter Derrick (block:4)</option><option value="block_delta_1">Other titles related to EJMS (block:1)</option><option value="block_delta_7">Submit online banner (block:7)</option><option value="block_delta_9">Test Tab (block:9)</option><option value="comment_delta_recent">Recent comments (comment:recent)</option><option value="menu_delta_menu-ejms-content">EJMS Content (menu:menu-ejms-content)</option><option value="menu_delta_menu-ejms-information">EJMS Information (menu:menu-ejms-information)</option><option value="menu_delta_menu-ejms-services">EJMS Services (menu:menu-ejms-services)</option><option value="menu_delta_menu-ejms-subscriptions">EJMS Subscriptions (menu:menu-ejms-subscriptions)</option><option value="node_delta_syndicate">Syndicate (node:syndicate)</option><option value="node_delta_recent">Recent content (node:recent)</option><option value="search_delta_form">Search form (search:form)</option><option value="shortcut_delta_shortcuts">Shortcuts (shortcut:shortcuts)</option><option value="system_delta_main">Main page content (system:main)</option><option value="system_delta_powered-by">Powered by Drupal (system:powered-by)</option><option value="system_delta_help">System help (system:help)</option><option value="system_delta_navigation">Navigation (system:navigation)</option><option value="system_delta_management">Management (system:management)</option><option value="system_delta_user-menu">User menu (system:user-menu)</option><option value="system_delta_main-menu">Main menu (system:main-menu)</option><option value="user_delta_login">User login (user:login)</option><option value="user_delta_new">Who&#039;s new (user:new)</option><option value="user_delta_online">Who&#039;s online (user:online)</option></select>
</div>
<div class="form-item form-type-checkbox form-item-tabs-0-block-hide-title">
 <input type="checkbox" id="edit-tabs-0-block-hide-title" name="tabs[0][block][hide_title]" value="1" checked="checked" class="form-checkbox" />  <label class="option" for="edit-tabs-0-block-hide-title">Hide the title of this block </label>
 
</div>
</td><td class="qt-tab-content qt-tab-view-content"></td><td class="qt-tab-content qt-tab-node-content"><div class="form-item form-type-textfield form-item-tabs-0-node-nid">
  <label for="edit-tabs-0-node-nid">Node </label>
 <input type="text" id="edit-tabs-0-node-nid" name="tabs[0][node][nid]" value="" size="20" maxlength="10" class="form-text" />
<div class="description">The node ID of the node.</div>
</div>
<div class="form-item form-type-checkbox form-item-tabs-0-node-teaser">
 <input type="checkbox" id="edit-tabs-0-node-teaser" name="tabs[0][node][teaser]" value="1" class="form-checkbox" />  <label class="option" for="edit-tabs-0-node-teaser">Teaser view </label>
 
</div>
<div class="form-item form-type-checkbox form-item-tabs-0-node-hide-title">
 <input type="checkbox" id="edit-tabs-0-node-hide-title" name="tabs[0][node][hide_title]" value="1" checked="checked" class="form-checkbox" />  <label class="option" for="edit-tabs-0-node-hide-title">Hide the title of this node </label>
 
</div>
</td><td class="qt-tab-content qt-tab-qtabs-content"><div class="form-item form-type-textfield form-item-tabs-0-qtabs-machine-name">
  <label for="edit-tabs-0-qtabs-machine-name">Quicktab </label>
 <input type="text" id="edit-tabs-0-qtabs-machine-name" name="tabs[0][qtabs][machine_name]" value="" size="20" maxlength="10" class="form-text" />
<div class="description">The quicktab machine name. Different styles may not work when putting an ajax quicktab inside ajax quicktab.</div>
</div>
</td><td class="qt-tab-remove"><div><input class="delete-tab form-submit" title="Click here to delete this tab." type="submit" id="edit-tabs-0-remove" name="op" value="remove_0" /><label for="edit-remove">Delete</label></div></td> </tr>

As far as I can tell, quicktabs_form.js is being loaded: it appears in the page head section and its URL works.

Not understanding how the Javascript controls the display of the node, block or quicktab choosers doesn't help, but, thinking php-wise, I would have thought they would have been output or not during page creation. Isn't it too late once they are in the HTML? Excuse my ignorance if that is stupid!

Thanks for your help. Let me know if I can provide any more information.

OK, I am stupid! The Javascript is presumably needed to switch the display of each cell on or off depending on which radio button is pressed. Sorry

subscribe

Subscribing

Subscribing

Hey guys, any progress on that?

subscribe

Marking this closed since there's a 3.x branch now....

:-)