Problem/Motivation

Quick Tabs direct linking currently generates URL fragments like:
#qt-quicktabs_course_term=files
Drupal core form.js listens for hash changes and treats the full hash as an element ID selector and
when the hash contains =, jQuery/Sizzle throws:
Uncaught Error: Syntax error, unrecognized expression: #qt-quicktabs_course_term=files
This can happen when clicking Quick Tabs direct links. It is especially noisy when AJAX tabs are enabled, but the problem is the fragment format, not the AJAX content loading itself.

Steps to reproduce

  1. Enable direct linking for a Quick Tabs instance.
  2. Click a tab that updates the URL fragment.
  3. Observe a fragment like #qt-instance=tab-slug.
  4. Check the browser console.

Proposed resolution

Change generated direct-link fragments to a selector-safe format, for example:
#qt-quicktabs_course_term--files

Keep parsing support for the legacy qt-name=slug format so existing inbound links still work.
Tests
Update the existing Nightwatch direct-linking test to assert the selector-safe fragment format and confirm:

  1. loading a direct link activates the matching tab
  2. clicking a tab updates the fragment
  3. multiple Quick Tabs instances remain namespaced
  4. browser back restores the previous tab

Issue fork quicktabs-3605620

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

joelpittet created an issue. See original summary.

joelpittet’s picture

Issue summary: View changes
joelpittet’s picture

Issue summary: View changes

joelpittet’s picture

Status: Active » Needs review

Considered changing this to a query string instead of hash for a hot second... but apparently we'd have to deal with caching... so didn't go that route.

  • joelpittet committed 8b3a0550 on 4.0.x
    fix: #3605620 Direct-link fragments use selector-unsafe format and...
joelpittet’s picture

Status: Needs review » Fixed

Fixed and merged, going to make another release in a moment.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.