Certain URL fragments cause javascript error

A work around that might work for your case is this:

Instead of

if ($fieldset.find('.error' + anchor).length) {
  $fieldset.removeClass('collapsed');
}

Use this

      if (anchor.indexOf('?') == -1) {
        // Default behavior.
        if ($fieldset.find('.error' + anchor).length) {
          $fieldset.removeClass('collapsed');
        }
      }
      else {
        // Exclude the anchor if it contains a query string because otherwise
        // jQuery errrors out in IE.
        if ($fieldset.find('.error').length) {
          $fieldset.removeClass('collapsed');
        }
      }

This conflict comes up when using AngularJS's $location service within D7.

Sample URL:

http://mysite.com/map#?station=8005&soil=3&groundCover=1

Same here too.

In misc/collapse.js, replace:

if ($fieldset.find('.error' + anchor).length) {

With:

      if ($fieldset.find('.error' + anchor.replace(/[=%;,\/]/g, "_")).length) {

If I get good feedback, I'll propose a patch for D7 core.

Here's the patch.

This code is unchanged in D8, meaning that it should probably be fixed there first.

Here's the patch for D8.

Is [=%;,\/] the full set of invalid characters, or could there be others? If a replacement takes place, will it ever match anything useful, or match something else by mistake?

Maybe this is more readable/useful:

if (anchor.search(/[=%;,\/]/) == -1 && ...) {

or

if (anchor.search(/^[valid characters]*$/) != -1 && ...) {

Is [=%;,\/]the full set of invalid characters, or could there be others?

There could be others.

I would much rather the route of checking for expected/valid characters as is done in
https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Component%21Util...

That being said, I would imagine that we could abstract this and just add it to drupal.js as a utilitarian method:

Drupal.cleanId = function (input) {
  if (typeof input !== 'string') return input;
  // Replace certain characters with hyphens and lowercase.
  var output = input.replace('/[\s_\[]', '-').toLowerCase();
  // Strip all non-alphanumeric characters.
  output = output.replace(/[^A-Za-z0-9\-_]/, '');
  // Removing multiple consecutive hyphens.
  return output.replace(/\-+/, '-');
};

Then we could just do something like:

var anchor = Drupal.cleanId(location.hash && location.hash !== '#' ? ', ' + location.hash : '');

Thank you for everyone's work on this issue. A more generic approach is definitely the way to go. We ran into this problem with AddThis. AddThis adds anchor tags on URLs when recommended content links are clicked. The rendered URL displays something like the following:

http://example.com/node/25#at_pco=smlwd-1.0&at_si=5622dc8ca8da4ad0&at_ac=per-2&at_pos=0&at_tot=1

The #5 patch appropriately handles the equal character ("="), but does not replace the ampersand ("&"). The result is a jQuery error:

Uncaught Error: Syntax error, unrecognized expression: .error_ #at_pco=smlwd-1.0&at_si=5622dc8ca8da4ad0&at_ac=per-2&at_pos=0&at_tot=1 (jquery.min.js:2)

If we add "&" to the possible characters in Patch #5 it works correctly. Therefore a patch that handles any possible special symbol would be the best method.

I just marked #2651230: collapse.js breaks when the hash contains jQuery BBQ-like query string as duplicate. There is a patch in that issue also.

Bump, re: #9

This issue always arises when hashes are not escaped. I have been facing it when blazy_photoswipe generated URLs like "foo#&gid=1&pid=2", and form.js's handleFragmentLinkClickOrHashChange() (see #2531700: Fragment links to children elements in closed grouping elements don't work) coughed on that:

jquery.min.js?v=3.2.1:2 Uncaught Error: Syntax error, unrecognized expression: #&gid=5&pid=1
    at Function.ga.error (jquery.min.js?v=3.2.1:2)
    at ga.tokenize (jquery.min.js?v=3.2.1:2)
    at ga.select (jquery.min.js?v=3.2.1:2)
    at Function.ga [as find] (jquery.min.js?v=3.2.1:2)
    at r.fn.init.find (jquery.min.js?v=3.2.1:2)
    at new r.fn.init (jquery.min.js?v=3.2.1:2)
    at r (jquery.min.js?v=3.2.1:2)
    at handleFragmentLinkClickOrHashChange (form.js?v=8.5.3:137)
    at debounce.js?v=8.5.3:27
    at dispatch (jquery.min.js?v=3.2.1:3)

the offending line in form.js:137 is

      var $target = $('#' + hash);

and replacing that (like in the patch here) with

      var $target = $('#' + hash.replace(/[^0-9a-zA-Z]/g, '\\$&'));

fixes the issue for me.

For a thorough fix we should implement a utility method as suggested in #9 and use it in all such instances.

For the correct utility method see:
* http://api.jquery.com/category/selectors/ ("meta characters...must be escaped")
* https://stackoverflow.com/a/32872718/606859
* https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js#L21

The last one contains a MIT licensed function that polyfills CSSCOM's CSS.escape which is what we want here.

#19 +.
I'm get error in form.js
Axel.rutz Ty

patch for form.js

As bug it needs test but let's see current coverage

i think #9 true.
And use for form.js, collapse.js

Thank you, batkor, #21 patch worked for me. 8.6.10.

Patch #21 worked for me, thanks @baktor.

See #9

Ugh, ran into this randomly breaking a embedded Vue SPA.

#!/my/route<code> blows this up real good.

<code>
+++ b/core/misc/form.js
@@ -134,7 +134,7 @@
-      var $target = $('#' + hash);
+      var $target = $('#' + hash.replace(/[^0-9a-zA-Z]/g, '\\$&'));
       $('body').trigger('formFragmentLinkClickOrHashChange', [$target]);

Similar I think to longwave's comment about earlier patch I think but it doesn't make sense that this triggers when there is no match. It wouldn't really be actionable by any listeners without a target would it? That's a bigger change though and just and optimization.

I took a pass at implementing Mark's helper since that makes sense with 2 locations. With 2 there's probably a third. His sample looked correct so I didn't really change anything other than some small cleanups:
1. chaining it
2. replaced the first regex with a native regex
3. added global flag to regex because they where only matching the first instance.

I don't have a lot of experience writing core's JS tests so those aren't included but as a first pass lets see if this breaks anything.

Had to reroll because of babel changes(+ to .concat) and that's not included in interdiff. Also didn't interdiff against the previous collapse patch since it was not on the es6.js file and that meant more work but changes should be obvious.

Reviewing some old patches I noticed some doc/spacing problems in the last patch. Quick fix.

eslint

removed

removed

Rerolled for 9.5

can't rtbc what's basically my own patch but we've been using this in production for _ages_ so it should be good to go.

We fix a bug, so needs a red test that triggers the bug and is fixed by the patch.

This also needs an issue summary update. The proposed resolution should explain what solution is being implemented.

Also needs a reroll for 10.x. Bug fixes are usually eligible for backport but in this case we are adding API so this is likely to land in the development branch only.

Patch for 10.1.x.

Thanks for rerolling. This still needs a test to exercise the broken behaviour and prove that we have fixed it with the patch.

conflicts with #3419763: Replace deprecated String.prototype.substr() with String.prototype.substring(). rerolled in a merge request. not sure what a test would look like so just the reroll atm.

Patch 46 adapted for Drupal 10.2.4.

The patch from #52 applied cleanly to Drupal 10.2.5.

Hi, I was trying to reproduce this issue in Drupal Core, where I can click on any button which takes me to the link with a fragment?
I am trying to write the test, but not sure what should be the Drupal page where I can get this error which I can convert to test.

Not sure of a common real case but I was able recreate this just now like this.

1. Install Drupal site.
2. Ensure registration is allowed.
3. Log out and visit the registration url with a complex url fragment. e.g. https://d10.lndo.site/en/user/register/#badfragment/broken

Hi I tried the steps above but the issue only occurs when we try to change the URL and not when we visit the URL for the first time?
If that is the expected behaviour how can we write a test for that scenario?

Testing / reproducing is fortunately pretty simple. The callback where the problem is occuring is triggered by, among other things, clicking on an anchor link inside a form. Get this link into a form <a href="#edit-contact/broken">This is an anchor link with a broken fragment</a> then click it, and the error will appear in the console.

And hopefully the issue summary can get updated soon as it is presents the issue as being specific to a file that has not been in Drupal for several years.

Thanks, yeah adding that link would be a simple way someone could see it.

Anyone could update issue summaries.

I tried reproducing this based on #58.
I added

$form['anchor_link'] = [
      '#type' => 'markup',
      '#markup' => '<a href="/#edit-contact/broken">This is an anchor link with a broken fragment</a>',
    ];

in FormTestUrlForm form and clicked on the anchor link inside the form.
This does not lead to any error on 11.x.Also it tried to edit the url and hit the url as mentioned in #57 by @yash.rode but then also there is no error in the console.
Also when following the same steps as mentioned by @yash.rode in #57 I was able to reproduce the same error as yash was able to get.

The question here is am I missing something is steps to reproduce?

I think this is documented and reviewed to death at this point. Its actually needs work because it needs tests as the tag suggests.

Re #60

The question here is am I missing something is steps to reproduce?

Yes. The file where the error is happening needs to be loaded in order to reproduce the problem.

The error is occurring in form.js, but the form loaded by FormTestUrlForm does not include that file.

See core.libraries.yml for the library that includes this file and the libraries that depend on it.

11 years ... wow, and still not resolved. 🙄

Is there any reason why jQuery.escapeSelector() wasn't used insteadof the cleanId function @Utkarsh_33 ?

https://api.jquery.com/jQuery.escapeSelector/