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

Question

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

I have debug, it's because of bootstrap, bootstrap navbar="nav navbar-nav" — ram
– ram, Commented Jul 19, 2015 at 6:24

Bidhan · Accepted Answer · 2015-07-19 06:05:57Z

17

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>

answered Jul 19, 2015 at 6:05

Bidhan

10.7k3 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ram Over a year ago

Its not about modal, or bootstrap component, its just a nav link

ram Over a year ago

This fixes my issue by adding data-target="#"

P.S. Over a year ago

It's ok for all routes except "/": a(href='#/', data-target='#'). My route config is the same: $routeProvider.when('/', {templateUrl: /views/home/home.html'}). What i'm doing wrong?

Lahiru Jayakody Over a year ago

I just removed all data-toggle attributes and fixed.

Community · Accepted Answer · 2017-05-23 12:26:17Z

8

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

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 19, 2015 at 6:06

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

4 Comments

ram Over a year ago

Are you referring to tabs? - Its not a bootstrap tab, its a normal link only

Sudhansu Choudhary Over a year ago

Did you give it a try? Have you placed <div ng-view=""></div>??

ram Over a year ago

Sorry, where do u asked me to put ng-view, it's header and i have used ng-include

Sudhansu Choudhary Over a year ago

better to use ng-view when you are using routing. You would generally have it in your index.html where you would inject views, goes pretty well with routing to form SPAs. Anyways did you get it fixed?

Miguel Peguero · Accepted Answer · 2017-04-25 18:09:09Z

5

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>.

answered Apr 25, 2017 at 18:09

Miguel Peguero

4885 silver badges5 bronze badges

2 Comments

Idiot_cheg Over a year ago

am facing the same issue like what you had faced. could pls share sample implementation of your codes

Idiot_cheg Over a year ago

when i try your solution. router link getting open in new tab instead of same page

Vagrant326 · Accepted Answer · 2016-09-08 20:30:21Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related