CODEWITHSUNDEEP
jqueryangularjstwitter-bootstrap
ram
ram

Reputation: 185

Uncaught Error: Syntax error, unrecognized expression: #/ angularjs and jquery

Following error shown up in my console whenever my page loads.

"Uncaught Error: Syntax error, unrecognized expression: #/about"

My code is as below:

                <li class="active">
                    <a href="/">Home</a>
                </li>
                <li class="">
                    <a href="#/about" title="About Us">About</a>
                </li>
                <li class="">
                    <a href="#/pricing">Pricing</a>
                </li>

It shows for all initial instance of . Initially, it shows for #/about as it is first, If I remove about us tab it will show up for pricing page link.

Its not bootstrap tab issue, This are simple navigation only

Routing Code in app.js:

$routeProvider.when('/', {
        templateUrl: 'partials/home.html'
    }).when('/account', {
        templateUrl: 'partials/account.html',
    }).when('/terms', {
        templateUrl: 'partials/terms.html'
    }).when('/about', {
        templateUrl: 'partials/about.html'
    }).otherwise({
        redirectTo: '/'
    });

I have debug its issue of bootstrap, bootstrap nav causing this issue: "nav navbar-nav" fixes for this is data-target="#" but wants proper work around for this

Upvotes: 14

Views: 44603

Answers (4)

Miguel Peguero
Miguel Peguero

Reputation: 488

This issue happens also on angular 2 projects. I just add data-target="#" to the anchor link. It solved my problem.

 <a data-target="#" [routerLink]="['/link']">my link</a>.

Upvotes: 5

Vagrant326
Vagrant326

Reputation: 95

This may be a very rare situation, but I've got same error because of some legacy code using Colorbox and location.hash.

jQuery(function() {jQuery('.content-row .csc-default a').tooltip({placement:'top'});
jQuery('a.gallery').colorbox({
    maxWidth:'95%',
    maxHeight:'95%',
    slideshow:true,
    current:' {current} / {total}',
    opacity:'0.80',
    transition:'none',
    speed:'550',
    slideshowSpeed:'5500',
    overlayClose:true,
    fixed:false,
    escKey:true,
    arrowKey:true,
    loop:true,
    title: function() { return $(this).data('original-title')},
    close:'<span class="glyphicon glyphicon-remove"></span>',
    previous:'<span class="glyphicon glyphicon-chevron-left"></span>',
    next:'<span class="glyphicon glyphicon-chevron-right"></span>',
    slideshowStart:'<span class="glyphicon glyphicon-play"></span>',
    slideshowStop:'<span class="glyphicon glyphicon-pause"></span>',
    rel: function() { return $(this).data('rel')}
});
if (location.hash) $(location.hash).collapse('show'); //when this line is commented, Angular Route works properly
});

Strange thing is that error was happening only when loading page with link to view like localhost/index.html#/main or simply reloading page with any view selected.

Upvotes: 1

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

Ok you gotta remove the slash, '/' with which your html becomes,

<a href="#about" title="About Us">About</a>

If you want to keep the slash, '/' you gotta use data-target attribute as,

<a href="#/about" title="About Us" data-target="#about">About</a>

More about it here

Upvotes: 8

Bidhan
Bidhan

Reputation: 10687

This is most probably a Bootstrap issue. Try using data-targetattribute on your links like this

<a href="#/about" data-target="#about" title="About Us">About</a>

Upvotes: 17

Related Questions