CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

Bootstrap 4.2.1 - Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector

I am working on a project which I started building on bootstrap 4.0.0. During this project, I had updated bootstrap regulary whenever the new versions ( 4.1.0 , 4.1.3 ) of bootstrap came and all the things were working perfectly until I have update to bootstrap 4.2.1 from there I encountered error in console when ever I click on the document

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector.

I figured out that it occur due to the dropdown because of this error the dropdown does not work. I also checked, that if I am using href="javascript:void(0);", href="#!" the error occur but if i use anchor tag without href or href="#" then it is working fine.

Note:- I need the solution with href="javascript:void(0); as href="# in the address link does not look pretty and page scrolls up to the top 

<div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="javascript:void();" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

Here is my codepen

Upvotes: 13

Views: 22297

Answers (7)

Amir Astaneh
Amir Astaneh

Reputation: 2206

Make sure that the anchor of the dropdown menu item is # instead of a path.

Solution: I use to Link instead of an a in React and replace it with simple <a href="#" ... and it is working now.

Upvotes: 0

Vijay Kanaujia
Vijay Kanaujia

Reputation: 479

getSelectorFromElement: function getSelectorFromElement(element) {
            var selector = element.getAttribute('data-target');
            if (!selector || selector === '#') {
                var hrefAttr = element.getAttribute('href');

                //selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
                selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
            }

            return (selector && document.querySelector(selector)) ? selector : null;
        }

this function through error due to document.querySelector not find id like "#home" so if any string not contain # prefix it through error. so replace this:

selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';

from this

selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';

Upvotes: 2

saber tabatabaee yazdi
saber tabatabaee yazdi

Reputation: 4959

as others said in comments

This is a bug in Bootstrap 4.2.1 and will be fixed in 4.3.0: github.com/twbs/bootstrap/issues/27903

just need to user 4.3.0 of bootstrap

just replace this

 <script src="https://cdn.rtlcss.com/bootstrap/v4.3.0/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

with this

<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

Upvotes: 0

Hardik Kondhiya
Hardik Kondhiya

Reputation: 51

=== Change in bootstrap.js v4.2.1 ===

Find below block

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

Need to add try and catch exception only as below

Replace

return selector && document.querySelector(selector) ? selector : null;

with

try {
    return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
    return null;
}

=== Change in bootstrap.min.js v4.2.1 ===

Replace

return e&&document.querySelector(e)?e:null

with

try{return e&&document.querySelector(e)?e:null}catch(err){return null;}

Upvotes: 5

Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

Here is the solution that works for me

Snippet from Bootstrap 4.1.3

getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || '';
    }

    try {
      return document.querySelector(selector) ? selector : null;
    } catch (err) {
      return null;
    }
},

Replace it from Bootstrap 4.2.1

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

Thanks to PixemWeb github solution

For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

Upvotes: 3

Lucas Fowler
Lucas Fowler

Reputation: 189

I was having this issue, and a comment on this reported issue clued me into the solution. I was copying the example from the Bootstrap docs, and I had to remove the ID from the parent link, and instead have that ID on the container for the child links, without the aria-labeledby property, and add a reference in the parent link data-target property.

This example shows what I was doing, which caused the console errors:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
        Commercial
    </a>
    <div class="dropdown-menu" aria-labelledby="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

This is the solution that worked for me:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Individual
    </a>
    <div class="dropdown-menu" id="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

Upvotes: 6

Mordecai
Mordecai

Reputation: 1494

A suggestion:

Remove the empty href attribute & add cursor:pointer style to make A element clickable.

#dropdownMenuLink {
  cursor: pointer; /* not necessary for Bootstrap */
  color: white /* change if you want */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions