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, unrecogn

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 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"