Toggle active link Bootstrap navbar - node.js

Question

I've read a lot of posts on the subject, found almost always the same solution but it does not work for me...
My problem is as follows : I want to use Twitter Bootstrap 2.3.2 and its navbar, so I include the css and js files. Just before that, I also include jquery. I then take an example given on the bootstrap site which display very well. However, I now want to set the menu item clicked as active and remove the active class from all others. I saw in the bootstrap.js file that this function is built in, so no more script code to include. The problem is that the menu items do never toggle to active. I then tried to add a jquery script to force removing all active classes and add the active class to the one item that was clicked. Nothing happened.
So please, help !! I tried the same code in jsfiddle and it works fine, so does the problem comes from jade ? from express layout ? how to fix it ?
Here is the code I use :
server.js
var express = require('express');
var app = express();
var port = 3000;
app.set('view engine', 'jade');
app.set('view options', {layout: true});
app.set('views', __dirname + '/views');
app.configure(function () {
this.use(express.cookieParser());
this.use(express.session({ secret: 'shhhhhhhhh' }));
this.use(express.static(__dirname + '/public'));
this.use(app.router);
});
app.get('/', function (req, res) {
res.render('index')
});
});
app.get('/about', function (req, res) {
res.render('about')
});
});
app.listen(port, function () {
console.log('listening in http://localhost:' + port);
});
/views/layout.jade
!!! 5
html
head
title Test Application
link(type='text/css', rel='stylesheet', href='/css/site.css')
link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css')
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js');
body
div.navbar.navbar-inverse.navbar-fixed-top
div.navbar-inner
div.container
button.btn.btn-navbar(type='button', data-toggle='collapse', data- target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.brand(href='#') Login Test Application
div.nav-collapse.collapse
ul.nav
li.active
a(href='#') Home
li
a(href='#about') About
li
a(href='#Contact') Contact
div.container
block content
/views/index.jade
extends layout
block content
div.span6.offset3
h1 Test Application
div.span12
h2 Test application!
p This is a test application
button.btn.btn-success(type='button', onclick='')') Login
/views/about.jade
extends layout
block content
div.span6.offset3
h1 - About -

Answer 1

You can try with something like that in you jade layout :
li(class=title=='Home'?'active':undefined)
a(href="/") Home
li(class=title=='About'?'active':undefined)
a(href="/about") About
li(class=title=='Contact'?'active':undefined)
a(href="/contact") Contact
Then just add this to your server.js :
app.get('/', function (req, res) {
res.render('index', title: 'Home')
});
app.get('/about', function (req, res) {
res.render('about', title: 'About')
});
This way, you can also remove the hard coded title in your layout and modify it through this solution as :
title #{title} | Test Application
And it will render this as a title for your home :
Home | Test Application

Answer 2

Here the solution I've found (I dont have the link anymore, sorry for the code owner)
ul.nav
-var obj = { 'home':'Home', 'about':'About', 'contact':'Contact' }
-each val, key in obj
-if (id == key)
li.active
a(href='#{key}') #{val}
-else
li
a(href='#{key}') #{val}
and I set the server.js as
app.get('/about', function (req, res) {
res.render("about", {
title: 'About',
id: 'about',
user: JSON.stringify(req.user, 0, 2)
});
});