CODEWITHSUNDEEP
jquerytwitter-bootstrapangularjs
Wei Hao
Wei Hao

Reputation: 2866

jQuery syntax error: #/

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?

Upvotes: 24

Views: 18746

Answers (4)

alexJS
alexJS

Reputation: 646

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"

Upvotes: 4

DEEPAK SURANA
DEEPAK SURANA

Reputation: 461

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.

Upvotes: 0

Ebrahim
Ebrahim

Reputation: 1818

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

Upvotes: 0

PSL
PSL

Reputation: 123739

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

Upvotes: 28

Related Questions