Linking Bootstrap tabs to server urls

Question

Looks like there's been much discussion on this already, but I just can't get my code work.

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 Uncaught Error: Syntax error, unrecognized expression: /employee_user_info/40/ error on client side. Here's my code:

HTML:

<div class="container">
        <h2>{{person_details_form.second_nm_rus.value}} {{person_details_form.first_nm_rus.value}} {{person_details_form.middle_nm_rus.value}}</h2>
        <ul class="nav nav-pills">
            <li class="active"><a data-toggle="pill" href="#home">Tab 1</a></li>
            <li><a data-toggle="pill" href='/employee_user_info/{{employee_unique_id}}/'>Tab 2</a></li>
            <li><a data-toggle="pill" href="#menu2">Tab 3</a></li>
        </ul>

        <div class="tab-content" style="margin-top:2%">
            <div id="home" class="tab-pane fade in active">
                <div class="container">
                    <!-- Something -->
                </div>
            </div>
        </div>

Django urlconf

 url(r'^employee_user_info/(?P<employee_unique_id>\d+)/$',employee_views.profile_user_info, name ='employee_user_info'),

JS

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');
    }

UPDATE:

The error happens on the client side when I click Tab 2.

UPDATE 2

When pressing Tab 2, the url becomes http://127.0.0.1:8000/employee_profile_main/40/#/employee_user_info/40/ I guess, the buck stops here

You'll need to give more context. Where exactly is that error happening? — Daniel Roseman, Jun 03 '16 at 13:34
No, please provide the context of the error as reported by the browser. What line does it happen on? — Daniel Roseman, Jun 03 '16 at 13:42

score 0 · Answer 1 · answered Jun 03 '16 at 14:33

0

You can't set href for a with /. I am guessing that it used as selector.

answered Jun 03 '16 at 14:33

ILdar Migranov

226
2
8

I've tried href='employee_user_info/{{employee_unique_id}}/' and href='/employee_user_info/{{employee_unique_id}}/' and even href='#employee_user_info/{{employee_unique_id}}/' :) – Edgar Navasardyan Jun 03 '16 at 14:36
1

@EdgarNavasardyan, я написал, что вы не можете использовать `/` в href, т.к. в bootstrap используется в качестве селектора. (you can't use `/` in `href`. Bootstrap use href as selector) – ILdar Migranov Jun 03 '16 at 14:42
Приятно) впервые пишу здесь по-русски. Не могли бы уточнить, я просто новичёк в этом. Можете написать сам код ? – Edgar Navasardyan Jun 03 '16 at 14:44

Linking Bootstrap tabs to server urls

1 Answers1

Linked