jQuery syntax error: #/

Question

I am currently using jQuery, Twitter Bootstrap and AngularJS for my web application. I've been trying to do routing, but jQuery keeps giving me Syntax error, unrecognized expression: #/time whenever I try to click on the time tab, or vice versa. I have no idea which is causing this error, except that it is caused by the # sign. I have googled extensively but to no avail. Here is my code:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#/main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#/time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

I need to keep the slash as I use it for my AngularJS routing (i.e. index.html#/main and index.html#/time will load different content in one of my divs). What could possibly be causing this error?

As far as i can see you want an anchor - so simply remove the slash, write #main, #time instead of #/main, #/time. — axel.michel
– axel.michel, Commented May 28, 2013 at 6:34
I am actually using the slash for my angularJS routing, so I can't remove it. ): Edited my post to reflect that. — Wei Hao
– Wei Hao, Commented May 28, 2013 at 6:38
You report a syntax error and don't even post the code that triggers it. — Álvaro González
– Álvaro González, Commented May 28, 2013 at 7:27
@ÁlvaroG.Vicario I did. That block of code is directly responsible for triggering the error. The actual error occurs inside jquery.min.js itself. I have also stated the actual error given in the first paragraph. Thanks to PSL, I have realized that it was caused by a conflict with Twitter Bootstrap's tabbing. — Wei Hao
– Wei Hao, Commented May 28, 2013 at 7:42

PSL · Accepted Answer · 2013-05-28 06:49:05Z

28

I guess extra slash in the href specifying id of the target. remove them and it should work fine.

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

Bootstrap looks at the href value as id for the target element to be shown as tab content. SO here in this case it would be looking for something with id = #/time which doesn't exist.

if you want to keep href intact you can use data-target attribute

<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>

Demo

edited May 28, 2013 at 6:49

answered May 28, 2013 at 6:33

PSL

124k21 gold badges257 silver badges243 bronze badges

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

3 Comments

Wei Hao Over a year ago

I see. So there is actually a conflict between bootstrap and my links (since I am trying to link via Angular). The alternative is not to use bootstrap to style my navbar then..?

mynameistechno Over a year ago

data-target attribute is what I needed, thanks. I did not see it documented but now I see it in the source code. thanks!

Ebrahim Over a year ago

My problem is not solved, I am using ui-router angular with jquery and bootstrap

alexJS · Accepted Answer · 2017-05-18 12:32:49Z

4

This issue appear when using jquery v3.* and bootstrap3, because "#" is no longer a valid selector( You can fix it by using instead of and remove attributes href="#" and data-target="#" for dropdowns. Looks like this:

<button data-toggle="dropdown" class="dropdown-toggle">YOUR_CODE</button>
 <ul class="dropdown-menu">
   <li><a href="javascript:void(0)" class="your-class">YOUR_TEXT</a></li>
   <li><a href="javascript:void(0)" class="your-class">YOUR_TEXT</a></li>          
 </ul>

For tabs, which using it's fixing by replace "#/" from href with "#some_your_id"

answered May 18, 2017 at 12:32

alexJS

6466 silver badges11 bronze badges

2 Comments

Alexander Holsgrove Over a year ago

Thanks - this seems to be the issue I was having with jQuery slim 3.2.1 and bootstrap 3.3.7.

Plippie Over a year ago

Be careful using javascript in href can be trouble using Content Security Policy (CSP). This is a conflict with JQ 3.x and and old bootstrap function bootstrap-dropdown. i would recommend to use href="#0" or update to the latest bootstrap

Ebrahim · Accepted Answer · 2016-01-08 12:28:51Z

0

I have my case, I past many times regarding this issue, so here I just wanted to share my case,

There was a code like this:

   handleTabs: function () {
    //var hash = document.location.hash;
    //var prefix = "tab_";
    //if (hash) {
    //  $('.nav a[href='+hash.replace(prefix,"")+']').trigger('click');
    //}
    //// Change hash for page-reload
    //$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    //  window.location.hash = e.target.hash.replace("#", "#" + prefix);
    //});
},

I skip those lines and my problem resolved.

It was a conflict with hashtagh slash #/ handling in the page between this code and ui.router angularJS

answered Jan 8, 2016 at 12:28

Ebrahim

1,8272 gold badges26 silver badges32 bronze badges

Comments

DEEPAK SURANA · Accepted Answer · 2017-04-13 04:55:27Z

0

In this toggling mechanism, data-toggle="tab" looks to switch between different tabs. But, in case of using Angular Routing these links to different view files.

I tried data-toggle="link" and it worked for me.

answered Apr 13, 2017 at 4:55

DEEPAK SURANA

4613 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery syntax error: #/

4 Answers 4

Demo

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related