Access current request in Express/Jade view

node.js express pug
Jon picture Jon · Oct 4, 2012 · Viewed 19.9k times · Source

I have a layout Jade view that has a menu via unordered list, and I want to set the <li> to be <li class="active">...</li> when the current page is rendered in the browser.

I assume I will have to access the current request to determine when to set the attribute on the <li>

I can't find any examples of how to do this so hoping someone can help

Thanks

Answer

chovy picture chovy · Oct 4, 2012

Try this before your call res.render() in your route:

res.locals.path = req.path;
res.render('/page');

or

res.render('/page', { path: req.path });

Then you would have to do a bunch of if/else statements in your view (as the above solution suggests).

- if(currentUrl === '/')
    li(class='active')
        a(href='/') Current Driver Standings
- else
    li
        a(href='/') Current Driver Standings

I however, prefer to do this on client side instead, to keep my template files free from as much logic as possible:

In page template file (this is ejs, not sure how to echo in jade):

<body data-path="<%= path %>">

Then with jQuery you can grab the path from body and attach an active class:

$(function(){
    var path = $('body').attr('data-path');
    $('nav li a[href='+path+']').parents('li').addClass('active');
});

Update: You can also just use var path = window.location.pathname instead of saving it to an attribute on body

//no need to save path to <body> tag first:

$(function(){
    var path = window.location.pathname;
    $('nav li a[href='+path+']').parents('li').addClass('active');
});

Related questions

Client on node: Uncaught ReferenceError: require is not defined

So, I am writing an application with the node/express + jade combo. I have client.js, which is loaded on the client. In that file I have code that calls functions from other JavaScript files. My attempt was to use …

Read More
How can I render inline JavaScript with Jade / Pug?

I'm trying to get JavaScript to render on my page using Jade (http://jade-lang.com/) My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head. Even taking the …

Read More
Error: Failed to lookup view in Express

Note: my auto answer at end of the post I'm trying to make a better experience of nodeJS and i don't really like to get all the script in one file. so, following a post here i use this structure ./ …

Read More