<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a></li>
<li class="main-header__item"><a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">Add Product</a></li>
</ul>
</nav>
When I try to render the page in my node js application I am getting an error. Saying there is an error
I am not so used to writing ejs but when I remove the class="<%= path === '/' ? 'active' : '' %>" in the navigation.ejs it seems to work
Error Image
Use <%- include('RELATIVE/PATH/TO/FILE'); %> to embed an EJS partial in another file.
The hyphen <%- instead of just <% tells EJS to render raw HTML.
The path to the partial is relative to the current file.
and also use ; at end of include
Here is an example...
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
Related
I am using ejs template engine in my express app with conditional rendering in title tag
//layout.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= pageTitle ? pageTitle : ''%></title>
</head>
<body class="container p-3 border">
<%- include('../partial/header.ejs') %>
<main><%- body %></main>
</body>
</html>
// header.ejs
<nav class="d-flex justify-content-between border p-2">
<ul class="nav">
<% if (user.isAuthenticated) { %>
<li class="nav-item mx-2 my-auto">
home
</li>
</ul>
</nav>
When I am sending response like this
res.render('upload',{pageTitle:'upload video'}
I do not know why the result will be pageTitle is not defined while pageTitle is rendering conditionally.
The error I am facing is as follows:
I have the following code written in server.js file. What am I doing wrong?
var express = require('express');
var app = express();
var instagram = require('instagram-node').instagram();
const ejsLint = require('ejs-lint');
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
instagram.use({
client_id:'1063599834134140',
client_secret:'66cbe60a931310beb7a8cf6d4ec7a12f '
});
app.get('/', function(req, res){
//
instagram.media_popular(function(err, medias, remaining, limit)
{
res.render('pages/index', {grams: medias});
});
});
app.listen(8080, function(err)
{
if(err)
{
console.log("Error Occured");
}
else
{
console.log("listening on port 8080");
}
});
And the following is index.ejs
<!DOCTYPE html>
<html>
<head>
<% include ../partials/head %>
<title></title>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<div class="row">
<% grams.forEach(function(true){ %>
<div class="instagram-pic col-sm-3">
<a href="<%= gram.link %>" target="_blank">
<img src="<%= gram.images.standard_resolution.url %>" class="img-responsive">
</a>
</div>
<div class="instagram-bar">
<div class="likes">
<span class="glyphicon glyphicon-heart"></span>
<%= gram.likes.count %>
</div>
</div>
<div class="comments">
<span class="glyphicon glyphicon-comment"></span>
<%= gram.comments.count %>
</div>
<% }) %>
</div>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
Looks to me like your includes are wrong. Using the ejs-lint package that your error message references gives the following:
Unexpected token (4:17) in asdf.ejs
<% include ../partials/head %>
In looking at some ejs docs, the syntax they give for include is:
Includes are relative to the template with the include call. (This requires the 'filename' option.) For example if you have "./views/users.ejs" and "./views/user/show.ejs" you would use <%- include('user/show'); %>.
You'll likely want to use the raw output tag (<%-) with your include to avoid double-escaping the HTML output.
So in your case that would be
<%- include('../partials/head') %>
And of course, same for your other includes.
Also for future reference, it would be way better to copy/paste the error text into a code block in your question, instead of linking a screen shot.
I have a weird problem happening on my ejs pages. When I include header and footer partials on any page that loads with a route parameter, the page hangs. When I hit the stop button on the page load, the page loads fine. On pages that do not have a route parameter, I have no issues.
I get the following error in node (the page loads with a route parameter called eventid):
params for results to find by eventid: { eventid: 'app.css' }
SOMETHING WENT WRONG GETTING RESULT: { CastError: Cast to ObjectId
failed for value "app.css" at path "event_id" for model "results"
I added a comment below after posting this question. I figure I would add some information here to give more details. My app.css link in the header partial is the cause of my problems. When I comment it out it works fine. In node, I've used the following line to include files in my resources folder which is in the root of my app. This works fine except when i load it using the partials footer. app.use(express.static(path.join(__dirname, 'resources')))
Sample pages...
<% include ../partials/header %>
<h3>Sample page</h3>
<% include ../partials/footer %>
Header partial...
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="google.com"><i class="fa fa-futbol-o"></i> PESers Only</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log In</li>
<li>Log Out</li>
</ul>
</div>
</div>
</nav>
<!-- <div id="wrapper"> -->
<div class="container">
Footer Partial...
</div> <!-- close container -->
<!-- </div> close wrapper -->
</body>
<footer class="footer">
<div class="footer-content list-inline">
Footer text | Contact Us
</div>
</footer>
</html>
It turns out that the problem I was having was related to the referencing of external files (in this case my app.css file). I was referencing it in my ejs header partial using: <link rel="stylesheet" type="text/css" href="app.css"> however the error was fixed when I added a backslash to the href: <link rel="stylesheet" type="text/css" href="/app.css">.
Essentially, when referencing resources such as a css file that is in a folder that is declared in app.use (app.use(express.static(__dirname + "/resources"));) you need the backslash to reference the root of your application and then access the resource you plan to reference in the ejs views.
I have a ejs page using node where I want to update my variable. The problem is that it is a part of a multipage view.
I'm passing a user variable from the node server to the webpage.
Once on the page, I have a header. I show the name in the header, but in the body, I update the data.
<!DOCTYPE html>
<html ng-app="KBase" ng-init= "m_user=<%=JSON.stringify(user)%>">
<head>
<title>Index</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-controller="accountController">
<header>
<% include header %>
</header>
<div class="container" ng-controller="accountController as up" ng-init="up.m_user = m_user">
I'm using angular to update the data. It is going to the server and updating. However, would rather not update the entire page and I don't want to hae multiple headers. However, the multiple headers is the only way I can see fixing the issue.
My header.ejs
<% if (user){ %>
<ul class="nav navbar-nav navbar-right" >
<!--<li>Link</li> -->
<li class="dropdown">
<%=(user.displayName)%><span class="caret"></span>
<ul class="dropdown-menu">
<li>logout</li>
<li>account settings</li>
<!-- <li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li> --!>
</ul>
</li>
</ul>
im sure this is silly, but i cant get it to work for the life of me, i just want to do a simple for statement with an if inside on ejs, but it keeps returning a unexpected catch event in express.
to set up the scene, i've got a JSON thats setting up a a registration form in nodejs using ejs as my template renderer, lets say I have the following code:
var userData:{
"username":"User name",
"email":"johndoe#gmail.com",
"password":"Please enter Password",
"birthdate":"date"
}
and i have a ejs file that goes
<h1 id="page-title"><%= title %></h1>
<div id="list">
<form action="user/create/" method="post" accept-charset="utf-8">
<div class="item-new">
<% for (var key in userData){ %>
<% if(key != 'birthdate'){ %>
<input class="input" type="text" name="<%= key %>" placeholder="<%= userData[key] %>"/>
<% }else{ %>
//do something
<% } %>
</div>
i've tried to define a variable beforehand and check the value of the definitions
If the example you provided is indeed all of your code, you aren't closing all of your tags, specifically, you aren't closing your for loop, one of your divs, or your form. When I close all of these, the view will render for me without errors. This is the ejs that I used:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style-min.css' />
</head>
<body>
<h1 id="page-title"><%= title %></h1>
<div id="list">
<form action="user/create/" method="post" accept-charset="utf-8">
<div class="item-new">
<% for (var key in userData){ %>
<% if(key != 'birthdate'){ %>
<input class="input" type="text" name="<%= key %>" placeholder="<%= userData[key] %>"/>
<% } else{ %>
<% } %>
<% } %>
</div>
</form>
</div>
</body>
</html>
And I used this function to render it:
exports.test = function(req, res){
res.render('test', { title: 'nodejs + ejs for if express returns a unexpected catch', userData:{
"username":"User name",
"email":"johndoe#gmail.com",
"password":"Please enter Password",
"birthdate":"date"
}});
};
When I use the above I get this as a result: