i m posting a form in geddy. i need to update my meta data according to posted data by the form, for this i have to pass post to
<%= partial('layout_header', {post: post}); %>
<div class="mainContain">
<div class="container">
<div class="wrapper">
<% console.log(post.title); %>
<%- displayFlash(flash); %>
<%- render(); %>
</div>
</div>
</div>
for the above implementation i need my 'post' data on application.html.ejs.
thanks
Use Session variables to pass data to header and required page. i used this for dynamic meta tags.
=========================== EDIT ======================
in controller
self.respond({
key: value,
headerTags: {
"pageTitle": "title",
"h1Tag" : "h1"
}
});
and in application.html.ejs
<%= partial('layout_header', {session: session, headerTags : headerTags }); %>
Related
I want someone to, please, help me to get over this hurdle. I'm trying to extract some documents that have the same properties from mongoDB. I'm using ejs template and mongoose.
Everything is working properly except that each of the documents appears more than once on the browser but I want each to appear once and in a sequential order.
I have the following code:
indexSchema:
const indexSchema = mongoose.Schema({
title: String,
subtitle: String,
quote: String,
image: String,
imageCaption: String,
author: String,
qualification: String,
body: String,
createdAt: {
type: Date,
default: Date.now
}
});
const Index = mongoose.model('Index', indexSchema)
module.exports = Index;
Index route:
app.get("/", async (req, res) => {
await Index.find((err, index) => {
if (err){
console.log("Sorry, posts not found successfully");
console.log(err);
} else{
console.log("Collections received successfully!")
res.render("index", {index:index});
index.ejs:
<%- include ('partials/header') %>
<div class="container">
<% index.forEach(index => { %>
<img src="<%= index.image %>" class="img-fluid mt-0.5" alt="Responsive image">
<div class="jumbotron jumbotron-fluid mt-1">
<div class="container">
<div class="row">
<div>
<h3><%= index.title %></h3>
<h5><%= index.subtitle %>.</h5><i><%= index.quote %></i>
</div>
</div>
</div>
</div>
<h3 class="mb-4">Featured Posts</h3>
View All Posts
<div class="card mt-4">
<div class="card-body">
<h4 class="card-title"><%= index.title %></h4>
<div class="card-subtitle text-muted mb-2">
<%= index.createdAt.toLocaleDateString(); %>
</div>
<div class="card-text mb-4">
<%= index.body %>
</div>
<div>
Read more<i class="fas fa-angle-double-right"></i>
</div>
</div>
</div>
<% }) %>
</div>
<%- include ('partials/footer') %>
From the index route, it's clear that I'm using the find() function. I know that this function brings back all the documents in the collection.
Since each document has a title, subtitle, author etc, it's difficult for me to make sure that each appears once on the browser using forEach loop.
The only means I know that would have rectified the issue for me is by targeting the id since each document has a unique id. But it seems I'm messing up everything because I do not know how to get this work in my HTML template since findById() appears to be incompatible with forEach(). Removing
forEach() from ejs also prevents all the images in the database from appearing on the browser.
I found that by using mongoose nexted schema I was able to achieve the same result I wanted. Though this is definitely not the best approach, I was able to use it to move to the next level until I gain more experience with mongoose and ejs
I'm still a baby on web development. I am getting the following error, can
anyone help me?
Schema:
var campgroundSchema = new mongoose.Schema({
name: String,
image: String,
description: String,
_id: String
});
var Campground = mongoose.model("Campground", campgroundSchema);
app.get("/campgrounds/:id",function(req , res){
Campground.findById(req.params.id, function(err, foundCampgrounds){
if(err){
console.log(err);
}else{
res.render("show", {campground: foundCampgrounds});
}
});
});
This is the index.ejs template:
<div class="row text-center" style="display:flex; flex-wrap:wrap">
<% campgrounds.forEach(function(campground){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= campground.image %>">
<div class="caption">
<h4> <%= campground.name %> </h4>
</div>
<p><a href="/campgrounds/ <%= campground._id %>"
class="btn btn-primary">More Info</a>
</p>
</div>
</div>
<% }) %>
</div>
show.ejs:
<%- include('partials/header')%>
<h1>this is a show template</h1>
<p><%= campground.name %></p>
<%- include('partials/footer')%>
TypeError:
Cannot read property 'name' of null
You should check if campground is defined at all - you can either do that in your nodejs-controller or in your template. Here's an example for ejs:
<%- include('partials/header')%>
<% if (campground) { %>
<h1>this is a show template</h1>
<p><%= campground.name %></p>
<% } else { %>
<h1>No camground data was found</h1>
<% } %>
<%- include('partials/footer')%>
On the index.ejs. Use a span to retrieve the _id from the
DB, as follows
<span> <%= campground._id %> </span>
Why? Because _id is a unique object and is auto-generated. No need to even
include it on the Schema unless you want to create it yourself on which case
you'll then amend the controller with a variable. I struggled with this but now
okay.
I'm trying to return as ajax response a raw html, this is the function that return the response:
res.render('partial/messages', {
successMsg: 'An email has been sent to you.' +
'Send Again.',
layout: false
}, function (err, list) {
res.set('Content-Type', 'text/html');
res.status(200).send({ msg: list });
});
the partial view message contains the following:
<% if(successMsg != ''){ %>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<%= successMsg %>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<% } %>
the ajax response is:
"
<div class="alert alert-success alert-dismissible fade show" role="alert">
An email has been sent to you.`<a href="127.0.0.1:3000/user/resendToken?email=foo#outlook.it">Send Again.</a>`
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
"
why the <a href tag is render &alt; ?
How can I fix that problem?
&alt; is the HTML entity corresponding to <. This is used to prevent code injection.
EJS is doing the transformation when you include a string using the <%= something %> syntax.
To prevent it, use the <%- something %> syntax.
Keep in mind that not escaping those characters may expose your service to XSS attacks.
Because <%= ... %> escapes the HTML. If you are sure you can trust the user.email and other user generated data, you can use the <%- successMsg %> instead, which won't escape the HTML.
You can read more about tags in the Docs section of EJS here.
I love using Hexo.. :)
I've setup custom page. Is it possible to show all post in my page as paginated?
Using site.posts got me all post without pagination.
What should I do to get all post as paginated from page?
Thanks.
In the main configuration file _config.yml, there is a per_page variable to allow you to choose how many post you want ot display per page.
Create a template, index.ejs for example :
<% page.posts.each(function(post) { %>
<article>
// do what you have to do to display each post
</article>
<% }) %>
<%- partial('pagination', {type: 'page'}) %>
As you can see, We use the page variable to get 7 posts.
After that, create an other template pagination.ejs, that allow you to navigate through the page :
<div class="pagination-bar">
<ul class="pagination">
<% if (page.prev) { %>
<li class="pagination-prev">
<% if (page.prev === 1) { %>
<a class="btn btn--default btn--small" href="<%- url_for(' ') %>">
<% } else { %>
<a class="btn btn--default btn--small" href="<%- url_for(page.prev_link) %>">
<% } %>
<i class="fa fa-angle-left text-base icon-mr"></i>
<span><%= __('pagination.newer_posts') %></span>
</a>
</li>
<% } %>
<% if (page.next) { %>
<li class="pagination-next">
<a class="btn btn--default btn--small" href="<%- url_for(page.next_link) %>">
<span><%= __('pagination.older_posts') %></span>
<i class="fa fa-angle-right text-base icon-ml"></i>
</a>
</li>
<% } %>
<li class="pagination-number"><%= _p('pagination.page', page.current) + ' ' + _p('pagination.of', page.total) %></li>
</ul>
</div>
I wrote a Hexo theme : Tranquilpeak, I recommend you to check the source code to understand how I built it and of course read the official Hexo documentation
I met a wield problem in node.js ejs template.
Here is the express code.
app.get('/course',function(req,res){
var locals = {};
locals.course = {
title: 'data.title',
city: 'data.city',
desc: 'data.desc',
id: 'data._id'
};
res.render('course_description',locals );
});
Here is the template code
<div >
<article>
<% if(locals.course) { %>
<div><% locals.course.title %></div>
<div><% locals.course.city %></div>
<div><% course.city %></div>
<div><% course.title %></div>
<% } %>
</article>
</div>
when res.render('course_description',locals ); is triggered, the local data should passed to the template, but for some unknown reason, it doesn't work for this example.
all I got is 4 empty
<div >
<article>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</div>
does anybody meet this wield problem before, I am so confused, I have done some working example before, but when I compare this with other working ones, I still can't find the reason.
Note, I am using the latest ejs and express
<% ... %> are for code constructions, not for output.
Try this:
<div>
<article>
<% if (locals.course) { %>
<div><%= locals.course.title %></div>
<div><%= locals.course.city %></div>
<div><%= course.city %></div>
<div><%= course.title %></div>
<% } %>
</article>
</div>