Problem/Motivation

Steps to reproduce:

  1. Install and enable quicktabs 7.x-3.x-dev
  2. Go to admin/structure/quicktabs/add
  3. Click on the 'Add tab' button at the bottom of the form
  4. The table should look like screenshot 1, i.e. 'Tab content' and 'Operations' columns are properly displayed
  5. Make sure that at least one of the tab titles is empty so the form won't validate
  6. Click on the 'Save' button

Expected result: 'Tab content' and 'Operations' columns should still show up like on screenshot 1.

Actual result: 'Tab content' is empty and 'Operations' is not styled, as displayed on screenshot 2.

Proposed resolution

The problem is that:

  • The content of 'Tab content' is updated by using $('#quicktabs-form') in the js
  • The styles of 'Operations' is updated by using '#quicktabs-form' in the css
  • Drupal changes the form ID from 'quicktabs-form' to 'quicktabs-form--2' when it is udpated with Ajax - see drupal_html_id()

The problem could be fixed by using a form class (.quicktabs-form) instead of the form ID (#quicktabs-form and #quicktabs-form--2).
Such solution is implemented in the patch provided at #1.

Remaining tasks

Reviews and tests are welcome.

The following issue might be related, though the 'Operations' column does not seem to be affected: #1589832: Content tabs chose block not showing on edit tab interface

CommentFileSizeAuthor
#1 ui_empty_and_unstyled_when_adding_tab_with_ajax-2024535-1.patch1.93 KBfengtan
Screenshot 2 - after clicking Save.png130.74 KBfengtan
Screenshot 1 - before clicking Save.png160.97 KBfengtan

Comments

fengtan’s picture

fengtan
Location Montreal, Canada
commented
StatusFileSize
new ui_empty_and_unstyled_when_adding_tab_with_ajax-2024535-1.patch1.93 KB

Here is the suggested patch

dooug’s picture

dooug commented

I couldn't replicate with the latest 7.x-3.x-dev

--- UPDATE ---

I was able to replicate. I started your steps from scratch and noticed that the form ID is incremented like so "quicktabs-form--4". Which is the real problem here, changing the CSS and JS to use a class instead of the ID doesn't solve the base problem.

It seems to be incremented when I add another tab and save the invalid form. I spent a while trying to understand this. Something about how the form is rebuilt with the new form elements isn't right... maybe the "num_tabs" should be in $form_state['values']['num_tabs'] ? IDK, I'm in over my head: https://api.drupal.org/api/drupal/includes%21form.inc/function/drupal_bu...

/**
 * Submit handler for the "Add Tab" button.
 */
function quicktabs_more_tabs_submit($form, &$form_state) {
  // Increment the number of tabs to be rendered.
  $form_state['num_tabs']++;
  $form_state['rebuild'] = TRUE;
}
smustgrave’s picture

smustgrave commented
Status: Needs review » Postponed (maintainer needs more info)

Has anyone had a chance to test this?

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)