1524216 - firefox not working with jquery 1.8 on clicking input field console logs Empty string passed to getElementById()

Status: RESOLVED INVALID

(DevTools :: Console, defect)

Description

[[e-mail]]

Attachment: 2019-01-31.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Steps to reproduce:

I made a website using jquery and bootstrap, its been working with chrome but when I test it with firefox and I click an input field it throws an error on the console Empty string passed to getElementById() (check the console)

Link of one page with a form: http://68.183.98.238/sign-up

Comment 1

[Liviu Seplecan]

I think that this issue is a duplicate of bug 964631, please feel free to add any comments on the issue there. Thanks for your contribution.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

I don't think it's a duplicate, but it's not a bug either.
I checked both Firefox and Chrome, and the values are the same. It's just that Firefox emit a warning when using getElementById with an empty string (which is the case here), whereas Chrome does not.
It doesn't prevent the script to "work", it's only a hint given to you that there might be something wrong.

Now I understand this originates from bootstrap and might be confusing.

The issue lies in the getParent function in bootstrap.js :

    var selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

Here, $this.attr('data-target') is undefined, so we enter into the if.
We then retrieve the href of the attribute, which here is set to # and cause the issue.
Anyway, in Firefox or Chrome, $parent.length is 0 (I don't know what issues that could cause though).

I hope I was helpful, and I'm going to close the bug as it's not a bug but a feature :)