CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Joseph Raphael
Joseph Raphael

Reputation: 348

Bootstrap dropdown Jquery Uncaught Error: Syntax error, unrecognized expression

I am trying to add an external http:// link on my bootstrap drop-down menu, but it always cause an

Uncaught Error: Syntax error, unrecognized expression: http://example.com/

Here's the code I used with jQuery v1.11.3 and bootstrap v3.3.5

<nav class="main-navi">
    <div class="webinarlink"><a class="btn btn-danger btn-block" data-target="#" style="background-color:#EA4A2B;margin:auto;" href="http://example.com/" target="_blank"><i class="icon-users"></i>Webinar</a></div>
    <ul>
        <li class="active"><a class="scroll-up" href="#home"><i class="fa fa-home"></i>&nbsp;Home</a></li>
        <li class=""><a class="scroll" href="#features">Features</a></li>
        <li class=""><a class="scroll" href="#testimonials">Testimonials</a></li>
        <li class=""><a class="scroll" href="#pricing">Prices</a></li>
        <li class="has-dropdown"><a class="scroll" href="#">Help<i class="fa fa-caret-down"></i></a>
            <ul class="dropdown">
                <li class=""><a class="scroll" href="#faq"><i class="fa fa-question-circle"></i>&nbsp;FAQ</a></li>
                <li class=""><a class="scroll" href="#team"><i class="fa fa-info-circle"></i>&nbsp;About Us</a></li>
                <li class=""><a class="scroll" href="#contus"><i class="fa fa-envelope"></i>&nbsp;Contact Us</a></li>
                <li class=""><a href="#pricing" class="scroll" onclick="Tawk_API.toggle();"><i class="fa fa-comments"></i>&nbsp;Chat with Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

I tried adding data-target="#" but it didn't work.

Upvotes: 10

Views: 17059

Answers (6)

kevin.riemens
kevin.riemens

Reputation: 279

When using Bootstrap 2.0.4 and jQuery 3+, find the toggle function definition in dropdown.js or bootstrap.js and find the line that says:

$parent = $(selector);

On the line before, put:

selector = selector && selector !== "#" ? selector : null;

Upvotes: 0

diego cantero
diego cantero

Reputation: 21

Here is my solution to the getParent function in bootstrap

function getParent($this) {
        var selector = $this.attr('data-target')

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

        //var $parent = selector && $(selector)
        var $parent = null;
        if (selector && selector !== '#') {
            $parent = $(selector)
        }

        return $parent && $parent.length ? $parent : $this.parent()
    }

Upvotes: 2

Ayoub Laazazi
Ayoub Laazazi

Reputation: 858

In my case, I had a script that automatically switches the "active" class on menu items on scroll, all the 'href' of the 'a' html tags under the Boostrap menu must not equal to "#", this solution worked for my case, if anyone has a similar case.

Upvotes: 5

Nux
Nux

Reputation: 10012

If you are stuck on old Bootstrap then you can patch getParent function of bootstrap-dropdown.js.

Just replace $parent = selector && $(selector) with this:

if (selector && selector !== '#') {
  $parent = $(selector)
}

Upvotes: 16

user3230982
user3230982

Reputation: 31

Please check JQuery added in your page. Mostly this type of error comes due to 2 or more jquery versions

Upvotes: 0

Joseph Raphael
Joseph Raphael

Reputation: 348

The issue has been fixed by following these steps:

  • Use latest version of jQuery v2.1.3 and bootstrap v3.3.6
  • Load Bootstrap JS after jquery in order
  • Using data-target="#" with href="#" and put the external link on an onClick() trigger.

Hope it helps.

Upvotes: 7

Related Questions