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
- Enable direct linking for a Quick Tabs instance.
- Click a tab that updates the URL fragment.
- Observe a fragment like
#qt-instance=tab-slug. - 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:
- loading a direct link activates the matching tab
- clicking a tab updates the fragment
- multiple Quick Tabs instances remain namespaced
- browser back restores the previous tab
Issue fork quicktabs-3605620
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
Comment #2
joelpittetComment #3
joelpittetComment #5
joelpittetConsidered 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.
Comment #7
joelpittetFixed and merged, going to make another release in a moment.