title: Linking Bootstrap tabs to server urls
body: <p>Looks like there's been much discussion on this already, but I just can't get my code work.</p>
  
  <p>I have a Django project and templates with Bootstrap tab pills. I am trying to bind tab menu pills to my Django project's urls. And I just can't get read of  <code>Uncaught Error: Syntax error, unrecognized expression: /employee_user_info/40/</code> error on client side. Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;h2&gt;{{person_details_form.second_nm_rus.value}} {{person_details_form.first_nm_rus.value}} {{person_details_form.middle_nm_rus.value}}&lt;/h2&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#home"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="pill" href='/employee_user_info/{{employee_unique_id}}/'&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="pill" href="#menu2"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="tab-content" style="margin-top:2%"&gt;
              &lt;div id="home" class="tab-pane fade in active"&gt;
                  &lt;div class="container"&gt;
                      &lt;!-- Something --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Django urlconf</p>
  
  <pre><code> url(r'^employee_user_info/(?P&lt;employee_unique_id&gt;\d+)/$',employee_views.profile_user_info, name ='employee_user_info'),
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var navpills = $('.nav-pills');
  $(function () {
      // activate tab on click
      navpills.on('click', 'a', function (e) {
        var $this = $(this);
        // prevent the Default behavior
        e.preventDefault();
        // send the hash to the address bar
        window.location.hash = $this.attr('href');
        // activate the clicked tab
        $this.tab('show'); // The error arises here
      });
  
      $(window).bind('hashchange', refreshHash);
  
      // read has from address bar and show it
      if(window.location.hash) {
        // show tab on load
        refreshHash();
      }
  });
  function refreshHash() {
        navpills.find('a[href="'+window.location.hash+'"]').tab('show');
      }
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The error happens on the client side when I click <strong>Tab 2.</strong> </p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>When pressing Tab 2, the url becomes <code>http://127.0.0.1:8000/employee_profile_main/40/#/employee_user_info/40/</code>
  I guess, the buck stops here</p>