Question

44

Finding current url inside EJS view when using express

rated 0 times [ 49] [ 5] / answers: 1 / hits: 28176 / 11 Years ago, thu, august 29, 2013, 12:00:00

I'm using Express and EJS to serve pages. I'm using Bootstrap for the UI, specifically the navbar.

I'd like to add an 'active' class to the current page's <li> item, to show the current page. However, I cannot find how to get the URL from within the EJS code rendering the page.

I found 2 workarounds: I used included passing the page name as a parameter in the route's res.render('myview', {pageName: 'myView'}); - which is not scalable and may cause issues.

The other way, was to use jQuery on the client side to add the 'active' class to the item upon page ready - but that means including this piece of script on every view + some useless client side cycles.

Having used several server side rendering languages before, I feel like I'm missing something. And the online EJS documentation is not that great.

Is there any way to find my current path/url from the EJS code?

Update:
I took the top 2 suggestions, and passed the view name as a parameter to the view. I really liked @tandrewnichols' idea to calculate it automatically, but ultimately, it was easier to just copy-paste strings :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalistaz

Add To Favorites

Follow

Total Points: 0

Total Questions: 100

Total Answers: 106

Location: Bermuda

Member since Thu, Apr 20, 2023

1 Year ago

answered 11 Years ago marisela · Accepted Answer

In pretty much every node/express templating language I've used (ejs, kiwi, swig, jade), the answer is no. I've always just set a variable called active and then checked for it. As you say, it's not a great answer, though I don't know that scalability is the issue. If every url renders it's own view (or even if you have a common handler for view rendering), it shouldn't be that hard to say something like req.active = Somepage. Another possibility would be to add middleware that does it for you based on the route. Something like

app.use(function(req, res, next){

    req.active = req.path.split('/')[1] // [0] will be empty since routes start with '/'

    next();

});

Then you just make sure any routes that have a corresponding nav component use unique paths, like

app.get('/students', ....)

app.get('/classes', ....)

app.get('/teachers', ....)

// etc.

EDIT: In response to your comment, I always throw ALL my view stuff into one object key inside req, and usually I name the key by whatever templater I'm using. So I would probably actually use the above example to set req.ejs.active and then do

res.render('myview', req.ejs);

This method makes it much easier to separate logic out into multiple middleware functions and not have to pass a huge anonymous object to res.render.