Here is my code,
<div id="main" class="container">
<% for danceCategory, i in #danceStyle : %>
<% if #i? % 2 == 0 : %>
<div class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png' />
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div>
<!-- <span class="heading_first"> #{danceCategory.category} </span> -->
<span class="heading_second"> <%- #danceCategory.category %> </span>
</div>
<ul class="dance_type">
</ul>
</div>
</div>
</div>
<% else : %>
<p>List is empty</p>
<% end %>
<% end %>
</div>
I am trying to iterate the dance categories.
Question :
How can can get the index of the iteration (i in this case)
<%- #danceCategory.category %> Not displaying any values (But I am
passing the values from node)
Something like this should do it, making sure that when you access the variables within the template you don't use the '#' accessor:
<div id="main" class="container">
<% for danceCategory, idx in #danceStyle : %>
<span>The index is <%= idx %> and category is <%= danceCategory.category %></span>
<% if idx % 2 == 0 : %>
<div class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png' />
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div>
<span class="heading_second"> <%= danceCategory.category %> </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div>
<% else : %>
<p>List is empty</p>
<% end %>
<% end %>
</div>
Params:
{
title : 'Hello, world!',
id : 'main',
danceStyle: [
{ category : 'Contemporary', type : 'Traditional Jazz' },
{ category : 'Skanking', type : 'Native American' },
{ category : 'Shuffling', type : 'Traditional Jazz' },
{ category : 'Chicago stepping', type : 'Native American' },
{ category : 'Detroit Ballroom', type : 'Traditional Jazz' },
{ category : 'Disco dancing', type : 'Native American' },
{ category : 'Drunken Sailor', type : 'Traditional Jazz' },
{ category : 'Linya vrak dance', type : 'Native American' },
{ category : 'Swing', type : 'Traditional Jazz' },
{ category : 'Stomp dance', type : 'Native American' },
{ category : 'Texas Swingout', type : 'Traditional Jazz' },
{ category : 'Texas slidethrough', type : 'Native American' },
{ category : 'Texas Tommy', type : 'Traditional Jazz' },
{ category : 'Skanking', type : 'Native American' },
{ category : 'Ballroom', type : 'Traditional Jazz' }
],
upperHelper : function (string) {
return string.toUpperCase();
}
}
Output
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<div id="main" class="container"> <span>The index is 0 and category is Contemporary</span>
<div class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Contemporary </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 1 and category is Skanking</span>
<p>List is empty</p> <span>The index is 2 and category is Shuffling</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Shuffling </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 3 and category is Chicago stepping</span>
<p>List is empty</p> <span>The index is 4 and category is Detroit Ballroom</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Detroit Ballroom </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 5 and category is Disco dancing</span>
<p>List is empty</p> <span>The index is 6 and category is Drunken Sailor</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Drunken Sailor </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 7 and category is Linya vrak dance</span>
<p>List is empty</p> <span>The index is 8 and category is Swing</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Swing </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 9 and category is Stomp dance</span>
<p>List is empty</p> <span>The index is 10 and category is Texas Swingout</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Texas Swingout </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 11 and category is Texas slidethrough</span>
<p>List is empty</p> <span>The index is 12 and category is Texas Tommy</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Texas Tommy </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div> <span>The index is 13 and category is Skanking</span>
<p>List is empty</p> <span>The index is 14 and category is Ballroom</span>
<div
class="row">
<div class="col-md-5 zero_padding" align="center">
<img class="img-responsive" src='image/bollywood_master_class_image.png'
/>
</div>
<div class="col-md-7 zero_padding">
<div class="content_right">
<div> <span class="heading_second"> Ballroom </span>
</div>
<ul class="dance_type"></ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="left">Generated by ECT</div>
<div class="right">page: main</div>
</div>
</body>
</html>
For info, I have tested this on ectjs.com as I couldn't replicate it on jsfiddle and it works. Below is the screenshot of the above issue:
Related
The actual challenge that I am facing now is how to load the comment properly. My Ajax is creating the comment but I am struggling to load the comment properly in line with other comments.
what happening now is that the comment loads but it doesn't load properly, I am struggling to load it with the right ID in the right place. when it loads, it shows my title and descriptions together and it doesn't load the date.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST" >
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists" >
<div class="col-sm-10" >
<h3 id="comments-count" ><%= program.programcomments.length%> </h3>
<% program.programcomments.forEach(comments=> { %>
<div class="media" >
<div class="media-body" >
<h4 class="media-heading" id="lists" ><%= comments.name %></h4>
<p id="lists" ><%=comments.description %></p>
<ul class="list-unstyled list-inline media-detail pull-left" id="lists">
<li id="lists"><i class="fa fa-calendar" ></i><%= moment(comments.createdAt).format('llll') %></li>
</ul>
</div>
</div>
<% });%>
</div>
</div>
</section>
$('#post-comment').on('click', function(event) {
event.preventDefault();
$.ajax({
url : "/programs/<%= program._id %>/createComment",
method : 'POST',
data : {
name : $('#username').val(),
description : $('#descriptioncomment').val()
},
success : function(result ) {
$('.form-control').each(function () {
let comments = this.value;
$('#comment-lists').append($('#lists').text(comments))
document.getElementById('comments-count').innerHTML++
});
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
}
});
})
You are using same ids for mutliple elements so first remove them and use class. Then , you can generate entire media div inside success function of ajax with the value of inputs and then append them inside your comment-lists div.
Demo Code :
$('#post-comment').on('click', function(event) {
event.preventDefault();
/*$.ajax({
url: "/programs/<%= program._id %>/createComment",
method: 'POST',
data: {
name: $('#username').val(),
description: $('#descriptioncomment').val()
},
success: function(result) {*/
//append new div .. with username & desc
$('#comment-lists').append(`<div class="media">
<div class="media-body">
<h4 class="media-heading">${$('#username').val()}</h4>
<p class="lists">${$('#descriptioncomment').val()}</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>${moment(new Date()).format('llll') }</li>
</ul>
</div>
</div>`)
$("#comments-count").text(parseInt($("#comments-count").text()) + 1) //updated total
//then emtpy
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
/*}
});*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST">
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists">
<div class="col-sm-10">
<h3 id="comments-count">2</h3>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading lists">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
</div>
</div>
</section>
i am building an express app with mongodb in nodejs, When i make a get request to the show posts route , then all posts are rendered correctly when i pass them in ejs file but after the show page is displayed it gives an error on the terminal
events.js:291 throw er; // Unhandled 'error' event ^ TypeError: Cannot read property 'title' of null
this is my get route in router/posts.js
router.get("/commerce", (req,res)=>{
if(req.query.search){
var noMatch;
// gives search results on author name, content and title of the post
const regex = new RegExp(escapeRegex(req.query.search), 'gi')
Post.find({$or: [{title:regex} , {content:regex}, {'author.username':regex}], subject: "commerce"}, function(err,allposts){
if(err) console.log(err)
else{
if(allposts.length<1){
noMatch = "No posts matched the search results , please try again"
}
console.log("searched", allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch, message: req.flash('success')});
}
})
} else{
Post.find({subject: "commerce"}, function(err,allposts){
if(err) {
console.log(err);
res.statusCode = 500;
res.end('error');
}
else{
console.log("actually all posts",allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch , message: req.flash('success')});
}
})
}
})
commerce.ejs
<%- include("./partials/header1.ejs") %>
<link rel="stylesheet" href="/stylesheets/commerce.css">
<%- include("./partials/header2.ejs") %>
<div class="top-horiz-bar">
<div class="logo-section-in-bar">
<img class="top-img-logo" src="./finallogopic.png" alt="logo-pic" height="60px" width="60px">
<!-- <img class="top-name-logo" src="./zoomed-brand-name.png" alt="logo-name" height="80px" width="130px"> -->
<h2 class="top-name-logo">Backbanchers</h2>
</div>
<div class="other-icons">
<div class="search-box">
<input id="search-font" class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="person-account">
<a class="account-info" href="#">
<i class="far fa-user-circle fa-2x"></i>
<span>Sign-in/up</span>
</a>
</div>
</div>
</div>
<div class="vertical-nav-bar">
Home<span><i class="fas fa-home"></i></span>
<a class="blog-section-left" href="#">Blogs<span><i class="fas fa-user-graduate"></i></span>
<!-- <ul class="sections-blog">
<a class="option-blog" href="#"><li>Business & Economics</li></a>
<a class="option-blog" href="#"><li>Commerce</li></a>
<a class="option-blog" href="#"><li>Personality Devlopment</li></a>
</ul> -->
</a>
Authors<span><i class="fas fa-pencil-alt"></i></span>
Newsletter<span><i class="fas fa-newspaper"></i></span>
Contact US<span><i class="fas fa-phone-alt"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
About Us<span><i class="fas fa-users"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
</div>
<div class="all-engineering-articles">
<div class="side-box">
<div class="one-of-3-heading">
<h2 class="side-box-heading-one">Trending</h2>
<div class="sub-part-section">
<h2 class="title-side-box">How 3D cameras with integrated data processing reduce the load on network and host PC</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Indy Cars Get a Little Safer—Thanks to a 200+ mph Windshield</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="two-of-3-heading">
<h2 class="side-box-heading-two">Recommended</h2>
<div class="sub-part-section">
<h2 class="title-side-box">Autonomous Mobile Robots and Cobots Improve Worker Safety and Retention</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Sustainable Control Panel Design</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">The Difference Between: Push-In Terminals versus Other Types of Connections</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="three-of-3-heading">
<h2 class="side-box-heading-three">Popular</h2>
<div class="sub-part-section">
<h2 class="title-side-box">
Why Using IIoT for Pneumatics is Simple, Yet Critical</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">
IR Camera Captures Defects in 3D Printing</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
</div>
<% posts.forEach(function(post){ %>
<div class="blog-post">
<div class="blog-post__img">
<img src="https://image.freepik.com/free-photo/cyborg-hand-pressing-keyboard-laptop-3d-rendering_117023-946.jpg" alt="article-pic" class="blog-post__article-img">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span><%= post.publishDay%></span>
<span><%= post.publish_date %></span>
</div>
<div class="author-name">
<ul class="author-content">
<li class="name-aut"><%= post.author.username %>></li>
<li class="save-to-later"><i class="fas fa-plus "></i></li>
</ul>
</div>
console.log(<%= post.title %>)
<h1 class="blog-post__title"><%= post.title %></h1>
<p class="blog-post__text"><%= post.content.substring(0,120) %></p>
Read more
<ul class="btns-on-blogcard">
<!-- <li class="btns-blog"><i class="far fa-eye fa-2x "></i></li> -->
<li class="btns-blog"><i class="far fa-hand-peace fa-2x "></i></li>
<li class="btns-blog"><i class="fas fa-share fa-2x "></i></li>
</ul>
</div>
</div>
<% }) %>
<div class="page-end">
</div>
<div class="next-page">
<h2 class="new-page-blogs">-Page 1 of 1- <span class="next-page-btn">Next page</span></h2>
</div>
</div>
<section class="footer" >
<footer id="foo">
<div class="overall-footer">
<div class="first-part">
<h2 class="our-name">Backbenchers</h2>
<img id="logo-of-learners" src="finallogopic.png" alt="our-logo" height="40%" width="14%">
</div>
<div class="bordering-right">
</div>
<div class="second-part">
<h2 class="second-links">Quick Links</h2>
<ul class="ul-class-footer">
<li class="quick-buttons">Home</li>
<li class="quick-buttons">Buisness & Economics</li>
<li class="quick-buttons">Commerce</li>
<li class="quick-buttons">Engineering</li>
<li class="quick-buttons">Personality Devlopment</li>
</ul>
</div>
<div class="third-party">
<div class="name-social-footer">
<li class="quick-buttons-2">Facebook</li>
<li class="quick-buttons-2">Instagram</li>
<li class="quick-buttons-2">LinkedIn</li>
</div>
<style>
a{
text-decoration: none;
color: white;
}
</style>
<div class="media-buttons-footer">
<a class="btns-footer-class-1" href="#"><i id="facebook-1" class="fab fa-facebook-f "></i></a>
<a class="btns-footer-class-2" href="#"><i id="instagram-1" class="fab fa-instagram "></i></a>
<a class="btns-footer-class-3" href="#"><i id="linkedin-1" class="fab fa-linkedin-in "></i></a>
</div>
</div>
<div class="fourth-party">
<h2 class="fourth-links">Social</h2>
<a href="mailto:ritishgupta45#gmail.com">
<span id="envolope-footer" class="fas fa-envelope fa-2x"></span>
<span id="email-footer" class="text">Backbenchers#gmail.com</span>
</a>
<input id="name-id-id" type="email" placeholder="Name">
<input id="email-id-id" type="email" placeholder="Email-id" required>
<input id="leave-msg-id-id" type="text" placeholder="leave a message">
<div class="send-button-footer">
<button id="send-id-id" type="submit">Send</button>
</div>
</div>
<div class="fifth-party">
<h2 class="fifth-links">Connect with Us</h2>
<h2 class="heading-of-news-footer">Newsletter subscription</h2>
<p class="para-of-news-footer">Subscribe to our fortnightly newsletter <br> to gain great knowledge exposure. <br> Also, stand a chance to participate <br> in brainstorming competitions <br> and win exciting prizes.</p>
<div class="suscribe-footer">
<input id="footer-suscribe-btns" type="email" placeholder="enter your email id" required>
<div class="red-btn-suscribe">
<button id="suscribing" type="button">Subscribe</button>
</div>
</div>
</div>
<div class="final-part">
<div class="box-copy">
<div class="btns-margin">
<h2 class="bottom-copy-footer">About Us</h2>
<h2 class="bottom-copy-footer">Privacy Policy</h2></a>
<h2 class="bottom-copy-footer">Terms and conditions</h2>
</div>
<h2 class="final-copywrite">copyright © All Rights Reserved | Backbenchers</h2>
</div>
</div>
</footer>
</section>
<%- include("./partials/footer.ejs") %>
output ss 1 of console.log("actually all posts",allposts)
output ss 2 of console.log("actually all posts",allposts)
in these output ss
i have added console.log("actually all posts",allposts) before res.render() and got the output whrere all posts are printed and at last null is also printed where is that null coming from? , and after this null , error is printed on the console as visible in the scrrenshots above
I am using express js as framework and ejs for view engine now for specific controller while passing data from controller to view it shows user not define with in view/partial/header.ejs which is working fine for other controller.
Controller code:
app.get('/add_home_content', function(req, res) {
User.findById(req.user, function(err, doc) {
if (doc.local.role == 'admin') {
var catId = '59f9be1aa40c152bc990f98f';
var contentid2 = '59faef18ce5da81b59c70a34';
var homeimgid = "59fc0e3e20942a15d7633cfd";
var contentplanid = "5a002bf79a62fc0bf2f14bbe";
content.findById(catId, function(err, content) {
//content.find({} ,{ "type": "homepage" }, function (err, content) {
//res.send(req.user.local);
trainercontent.findById(contentid2, function(err, trainercontent) {
homeimage.findById(homeimgid, function(err, homeimage) {
trainerinfo.find({}).exec(function(err, trainerinf) {
traininginfo.find({}).exec(function(err, traininginf) {
subscplancontent.findById(contentplanid, function(err, plancontent) {
banner.find({}).exec(function(err, bannerinf) {
// notification.find({}).exec(function(err, notifications) {
//res.send(content);
//trainercontent.find({}).exec(function(err, trainercontent) {
// res.send(notifications);
res.render('admin/content/addcontent.ejs', {
editContent: content,
editcontent2: trainercontent,
editcontent3: homeimage,
trainerinfo: trainerinf,
traininginfo: traininginf,
plancontents: plancontent,
bannerinfo: bannerinf,
message: false,
user: req.user.local
});
});
});
});
});
});
});
});
}
});
});
View page code(view engine ejs code) Showing user undefined error:
<script type="text/javascript">
/********signUp form validation *********/
$(document).ready(function() {
$('#planAdd').submit(function(e) {
var valid = $("#planAdd").valid();
if (valid) {} else {
e.preventDefault();
}
});
$('#planAdd').validate({
rules: {
'plan_name': 'required',
'price': 'required',
'currency': 'required',
'plan_duration': 'required'
},
messages: {
plan_name: {
required: "Plan can't be blank"
},
price: {
required: "Price can't be blank"
},
currency: {
required: "Currency can't be blank",
},
plan_duration: {
required: "Plan Duration can't be blank"
}
}
});
});
/********end of form validation *********/
</script>
<div class="page-inner">
<% if (message.length > 0) { %>
<div class="alert alert-danger">
<%= message %>
</div>
<% } %>
<div id="main-wrapper">
<a class="btn btn-success btn-lg " href="javascript: history.go(-1)">←Back To previous page</a>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 add-plan-form">
<div class="row m-t-md">
<h1 class="add-plan-heading">Add Content</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab li:eq(0) a").tab('show');
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.col-sm-8 {
width: 96.667%;
}
#media (min-width: 320px) and (max-width: 480px){
#myTab li {
width: 100%;
margin: 5px 0;
}
}
#media (min-width: 481px) and (max-width: 640px){
#myTab li {
width: 50%;
margin: 5px 0;
padding: 5px;
}
}
#media (min-width: 641px) and (max-width: 767px){
#myTab li {
width: 33%;
margin: 5px 0;
padding: 5px;
}
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li><a data-toggle="tab" href="#sectionA">Home page content</a></li>
<li><a data-toggle="tab" href="#sectionB">Trainer content</a></li>
<li><a data-toggle="tab" href="#sectionc">Home page bottom content</a></li>
<li><a data-toggle="tab" href="#sectiond">Trainers</a></li>
<li><a data-toggle="tab" href="#sectione">Add training type</a></li>
<li><a data-toggle="tab" href="#sectionf">Subscription plan content</a></li>
<li><a data-toggle="tab" href="#sectiong">Add Banner</a></li>
</ul>
<div class="tab-content clearfix">
<div id="sectionA" class="tab-pane fade in active">
<form action="/updateContent?id=<%= editContent.id %>" method="POST" id="planAdd">
<div class="form-group">
<label>Content Heading</label>
<input type="text" class="form-control" name="content_heading" value="<%= editContent.content_heading %>">
</div>
<div class="form-group">
<label>Content Description</label>
<textarea rows="7" cols="50" name="content_desc" class="form-control" ><%= editContent.content_desc %>
</textarea>
<span class="Phon_err"></span>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectionB" class="tab-pane fade">
<form action="/updatetrainContent?id=<%= editcontent2.id %>" method="POST" id="categoryAdd">
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="heading" value="<%= editcontent2.heading %>">
</div>
<div class="form-group">
<label>Description</label>
<!-- <input type="text" class="form-control" name="desc"> -->
<textarea rows="7" cols="50" name="desc" class="form-control" ><%= editcontent2.desc %>
</textarea>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectionc" class="tab-pane fade">
<form action="/add_img?id=<%= editcontent3.id %>" method="post" id="videoAdd" enctype="multipart/form-data" >
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="title" value="<%= editcontent3.title %>" >
</div>
<div class="form-group img-d">
<label > Thumbnail</label>
<div "><input type="file" class="" id="e_Img_file" name=" home_img"></div>
<img src="./uploads/homepageimage/<%= editcontent3.home_img %>" height="200" width="220">
<span class="value"></span>
</div>
<button type="submit" class="btn btn-success btn-lg pull-right">Save</button>
</form>
</div>
<div id="sectiond" class="tab-pane fade in active m-div clearfix">
<h2 class="h-div">
Add new trainer</h2>
<!-- <% if(trainerinfo){ trainerinfo.forEach( function (trainerinf){ %>
<div class="members animated fadeInLeft visible" data-animation="fadeInLeft" data-animation-delay="300"><div class="content_slider_text_block_wrap"><div class="team-img"><img src="/uploads/trainerprofile/<%- trainerinf.trainer_profile %>" alt="image" class="member_photo" width="250" height="320"></div><div class="team-inner"><div class="team-top center"><h4 class="membername"><%- trainerinf.trainer_name %></h4><br><span class="membername_dec"><%- trainerinf.trainig_type %></span></div></div></div><div class="clear"></div></div><div class="sharemedeia"><a target="_self" href="<%- trainerinf.trainer_facebook %>"><i class="fa fa-facebook"></i></a><a target="_self" href="<%- trainerinf.trainer_twiter %>"><i class="fa fa-twitter"></i></a><a target="_self" href="<%- trainerinf.trainer_google %>"><i class="fa fa-google-plus"></i></a></div>
Edit
Delete
<% }); }%> -->
<div class="members_section">
<div class="row">
<% if(trainerinfo){ trainerinfo.forEach( function (trainerinf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/trainerprofile/<%- trainerinf.trainer_profile %>" alt="image" class="member_photo img-responsive">
<h4 class="membername"><%- trainerinf.trainer_name %><span class="membername_dec">(<%- trainerinf.trainig_type %>)</span></h4>
<div class="sharemedeia">
<a target="_self" href="%- trainerinf.trainer_facebook"><span class="s-bg"><i class="fa fa-facebook"></i></span></a>
<a target="_self" href=""<%- trainerinf.trainer_twiter %>"><span class="s-bg"><i class="fa fa-twitter"></i></span></a>
<a target="_self" href="<%- trainerinf.trainer_google %>"><span class="s-bg"><i class="fa fa-google-plus"></i></span></a></div>
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
<div id="sectione" class="tab-pane fade in active">
<h2 class="h-div"><a href="/addtrainingtype" >Add new training type</a></h2>
<div class="members_section">
<div class="row">
<% if(traininginfo){ traininginfo.forEach( function (traininginf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/trainingtype/<%- traininginf.training_profile %>" alt="image" class="member_photo img-responsive">
<h4 class="membername"><%- traininginf.trainer_title %></h4>
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
<div id="sectionf" class="tab-pane fade in active">
<form action="/subsplanContent?id=<%= plancontents.id %>" method="POST" id="planAdd">
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="title" value="<%= plancontents.title %>" >
</div>
<div class="form-group">
<label>Content Description</label>
<textarea rows="7" cols="50" name="content_desc" class="form-control" ><%= plancontents.content_desc %>
</textarea>
<span class="Phon_err"></span>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectiong" class="tab-pane fade in active">
<h2 class="h-div">
Add banner image</h2>
<div class="members_section">
<div class="row">
<% if(bannerinfo){ bannerinfo.forEach( function (bannerinf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/bannerimage/<%- bannerinf.banner_image %>" alt="image" class="member_photo img-responsive">
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
</div>
</div>
</body>
</html>
</div>
</div>
</div>
</div>
in my code, i have a view called "show.ejs" which shows client details. the proble; now is that if i update client details (image, associated docs, ...) the content remains the same and changes only if i refresh the page ( by F5 ) .
this my update and show actions in ClientController :
findOne : function(req,res){
Client.findOne({
id : req.param('id')
})
.populate('docs')
.populate('sites')
.exec(function(err,client){
if(err) throw err;
if(client) {
return res.view('client/show', {
client : client
});
} else {
return res.redirect('/client');
}
})
},
update : function(req,res){
var name = req.param('name'),
id = req.param('id'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
Client.findOne({id : id}).exec(function(err,client) {
if(err) console.log(err);
client.name = name;
client.town = town;
client.adress = adress;
client.telephone = telephone;
client.fax = fax;
client.website = website;
client.email=email;
client.responsable=responsable;
client.postalCode=postalCode;
client.activity = activity;
client.save();
req.file('logo').upload({
dirname: require('path')
.resolve(sails.config.appPath+'/assets/uploads/clients/logos/')
}, function (err, logo) {
if (err) throw err;
if(typeof logo !== 'undefined' && logo.length > 0 ) {
require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){
if(err) console.log(err)
client.logo = require('path').basename(logo[0].fd);
client.save();
})
}
return res.redirect('/client/'+client.id );
});
})
}
and this is how i setup the view :
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar" style="background-color: #f5f5f5;">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle ">
<div class="profile-usertitle-name"><%= client.name %></div>
<div class="profile-usertitle-job"> Client </div>
</div>
</div>
<!-- END PORTLET MAIN -->
<!-- PORTLET MAIN -->
<div class="portlet light " style="background-color: #f5f5f5;">
<!-- STAT -->
<div class="row list-separated profile-stat">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"> <%= 44 %> </div>
<div class="uppercase profile-stat-text"> Sites </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"><%= 49 %> </div>
<div class="uppercase profile-stat-text"> Documents </div>
</div>
</div>
<!-- END STAT -->
<div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-map-marker"></i>
<span class="profile-desc-text" ><%= client.adress %></span>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-envelope"></i>
<%= client.email %>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-globe"></i>
<%= client.website %>
</div>
</div>
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption caption-md">
<i class="icon-globe theme-font hide"></i>
<span class="caption-subject font-blue-madison bold uppercase">Client N° <strong> <%= client.id %></strong></span>
</div>
<ul class="nav nav-tabs">
<li class="active">
informations
</li>
<li>
Documents
</li>
<li>
Sites
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane active" id="tab_1_1">
<form class="form-horizontal" role="form" action="edit">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<input type="text" hidden name="id" value="<%=client.id%>">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Modifier</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-body">
<h3 class="form-section">Informations Personneles </h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">ID :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.id %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Nom :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Responsable :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"><%= client.responsable %></p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Email :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.email %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Téléphone :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.telephone %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Fax :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.fax %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<h3 class="form-section">Adresse</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">#</label>
<div class="col-md-9">
<strong> <p class="form-control-static"> <%= client.adress %> </p></strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Ville:</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.town %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Code postal:</label>
<div class="col-md-6">
<strong> <p class="form-control-static"> <%= client.postalCode %></p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
</form>
</div>
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<button type="submit" class="btn green" data-toggle="modal" href="#basic">
<i class="fa fa-plus"></i> Ajouter un doc </button>
</div>
</div>
</div>
</div>
</div>
<!--- doc model -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Ajouter un Document</h4>
</div>
<div class="modal-body">
<form action="/client/addDocument" method="POST" enctype="multipart/form-data">
<input type="text" hidden name="id" value="<%= client.id %>">
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Titre</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div>
</div>
</div>
<br>
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea>
</div>
</div>
</div>
<div class="form-group" style="padding-bottom: 22px; padding-top: 40px;">
<label class="col-md-3 control-label">Document</label>
<div class="col-md-9">
<div class="input-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="fichier"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn green">Enregistrer</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- fin doc model -->
<br>
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<i class=" fa fa-file font-green"></i>
<span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1">
<thead>
<tr>
<th class="all">#</th>
<th class="min-tablet">Titre</th>
<th class="desktop">Description</th>
<th class="all" style="width : 66px">Action.</th>
</tr>
</thead>
<tbody>
<% _.each(client.docs, function (doc) { %>
<tr>
<td ><%=doc.id%></td>
<td ><%= doc.title %></td>
<td ><%= doc.description %></td>
<center> <td>
<a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a>
<a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!"
data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a>
</td></center>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
Actually following your code, the problems reside in
client.save()
which is an asynchronous function.
the problem is you are changing the client and you are not waiting for the changes to be saved to upload the logo and reload the data.
here's the official doc, which is stating that model.save has a callback to it.
client.save(function(){
/*your code */
})
The view, with those EJS functions is doing what is expected to do. You see, you are not providing some way to magically change data on-the-fly. Instead what EJS and your controller is doing is this: Get all data needed - with findOne -> Put that data on the view - with EJS and <% %> markers -> Render and serve a static HTML document - res.view.
If you need data to change on the fly you need a more powerful framework on the frontend, like Vuejs or Angular... EJS is meant to assembly a static page with dynamic data ONCE. Take a look at the docs
we have created a e-commerce project in that while clicking on categories in UI it will renders to category page in that page it has show one product of each subcategory
i have written the code in which the entire products with the specific category name is displaying how i can remove the extra products as of now i required only one product of each sub category of the particular category
the routing code is
router.get("/shop/:category_name", function(req, res){
//querystring
var url = require('url');
var url_parts = url.parse(req.url, true);
var query = url_parts.query;
var viewModel = {
breadCrumb: [],
categories : [],
featuredProducts :[],
products : [],
};
viewModel.breadCrumb.push({
name : 'Home',
class : 'breadcrumb-ordinary'
});
viewModel.breadCrumb.push({
name : req.params.category_name,
class : 'breadcrumb-active'
});
async.parallel({
categories: function(cb){
Category.find({}, cb);
},
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
}, function(err, results) {
if (err) throw err;
viewModel.categories1=results.categories1;
viewModel.categories=results.categories;
res.render('shop/prod_grid',viewModel);
});
});
the view UI code is
<!doctype html>
<html lang="en-US"> <!--<![endif]-->
<head>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../shop-plugins/css/jplist-pagination.css">
<link rel="stylesheet" href="../../../shop-plugins/css/breadcrumb.css">
<body>
{{> shop/header}}
<!-- BAR -->
<div class="shipping-wrap">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li>
{{#each breadCrumb}}
{{#if #first}}
<a href="/" class="{{class}}">{{name}}
{{else}}
<a class="{{class}}">{{name}}
{{/if}}
{{#if #last}}
{{else}}
<i class="fa fa-angle-double-right"></i></a>
{{/if}}
{{/each}}
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- BAR -->
<!-- PRODUCT-OFFER -->
<div class="product_wrap">
<div class="container">
<div class="row">
<div id="span9" class="span9 product-grid">
<div id="products" class="box jplist jplist-grid-view">
<div class="jplist-panel box jplist-panel-top">
<div
class="jplist-drop-down"
data-control-type="items-per-page-drop-down"
data-control-name="paging"
data-control-action="paging">
<ul id="per-pages">
<li><span data-number="3">3 per page</span></li>
<li><span data-number="6" data-default="true">6 per page</span></li>
<li><span data-number="9">9 per page</span></li>
<li><span data-number="12">12 per page</span></li>
</ul>
</div>
<div
class="jplist-drop-down"
data-control-type="sort-drop-down"
data-control-name="sort"
data-control-action="sort">
<ul id="sorting">
<li><span data-path="default">Sort By</span></li>
<li><span data-path=".brand" data-order="asc" data-type="text">Brand A-Z</span></li>
<li><span data-path=".brand" data-order="desc" data-type="text">Brand Z-A</span></li>
<li><span data-path=".cost" data-order="asc" data-type="number">Cost Low-High</span></li>
<li><span data-path=".cost" data-order="desc" data-type="number">Cost High-Low</span></li>
</ul>
</div>
<div
class="jplist-label"
data-type="Page {current} of {pages}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-views"
data-control-type="views"
data-control-name="views"
data-control-action="views"
data-default="jplist-grid-view">
</div>
</div>
{{#each subcategoryprod}}
<div>
<ul>
<li>{{subcategory}}</li>
</ul>
</div>
{{/each}}
<!--category wise products-->
<div id="jp-panel" class="list box text_shadow">
{{#each subcategoryprod}}
<div id="jp-panel-item" class="list-item box">
<div class="span3 product">
<div>
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="" onerror="this.src='../../../shop-images/coming-soon.png'">
<div class="overlay">
</div>
{{/if}}
{{else}}
<img src="../../../shop-images/coming-soon.png" alt="">
<div class="overlay">
</div>
{{/each}}
</figure>
<div class="detail">
<span name="retailprice" class="cost">₹{{RetailPrice}}</span>
<span>{{colour}}</span>
<h4 class="brand">{{brand}}</h4>
<span>{{Description}}</span>
<div class="icon">
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="box jplist-no-results text-shadow align-center">
<p> No results Found</p>
</div>
<div class="jplist-panel box panel-bottom">
<div
class="jplist-label"
data-type="{start} - {end} of {all}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-pagination back-top"
data-control-animate-to-top="true"
data-control-type="pagination"
data-control-name="paging"
data-control-action="paging">
</div>
</div>
</div>
</div>
<div class="span3">
<div class="row">
</div>
<div id="sidebar">
<div class="widget">
<h4>Price Filter</h4>
<div class="price-range">
<div id="slider-range"></div>
<p class="clearfix">
<input type="text" id="amount" readonly />
<input type="text" id="amount2" readonly />
</p>
</div>
</div>
<div class="widget">
<h4>BRANDS</h4>
<div id="">
<div class="brands">
<input type='text' id='txtList' onkeyup="searchBrand(this)" placeholder="search brands here....." />
<!-- <ul id="fromList" class="myid"> -->
{{#each products}}
<ul id="fromList" class="myid">
<li> <input type="checkbox" id="{{brand}}" class="brandFilterCheckBox pull-right" align="center"/> <label for="{{brand}}">{{brand}}<label></li>
</ul>
{{/each}}
<!-- </ul> -->
</div>
</div>
</div>
</div>
<div class="widget">
<h4>CATEGORIES</h4>
<div id="accordion">
{{#each categories}}
<h5>{{category_name }}</h5>
<div>
<ul>
{{#each subcategories1}}
<li>{{subcategory_name}}</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured Products -->
<div class="container" style="margin-top:10px">
<div class="row heading-wrap">
<div class="span12 heading">
<h2>Featured Products <span></span></h2>
</div>
</div>
<div class="row similar_products">
<div id="feat_prod">
{{#each featuredProducts}}
<div class="span3 product">
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="">
<div class="overlay">
</div>
{{/if}}
{{/each}}
</figure>
<div class="detail">
<span>₹{{RetailPrice}}</span>
<h4>{{product_name}}</h4>
<span>{{Description}}</span>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!-- PRODUCT-OFFER -->
<!-- FOOTER -->
{{> shop/footer}}
<script type="text/javascript" src="../../../shop-plugins/js/jplist-pagination.js"></script>
<script src="../../../bootstrap/js/star.min.js"></script>
<script src="../../../shop-plugins/js/jquery.paginate.js"> </script>
<script>
$(function(){
$('#feat_prod').paginate();
});
</script>
<script>
$(document).ready(function(){
$('#products').jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
});
</script>
<script>
$('document').ready(function(){
$("#slider-range").slider({change : function(event,ui){
var lowerLimit=$("#amount").val();
var numberLowerLimit=Number(lowerLimit.substring(1,lowerLimit.length));
var upperLimit=$("#amount2").val();
upperLimit=upperLimit.substring(1,upperLimit.length);
var numberUpperLimit=Number(upperLimit.replace("₹",""));
console.log("LOWER LIMIT :"+lowerLimit+" UPPER LIMIT :"+upperLimit);
$(".cost").each(function(){
var rowUnitCost=$(this).text();
var unitCost=Number(rowUnitCost.substring(1,rowUnitCost.length));
if(unitCost<numberLowerLimit || unitCost>numberUpperLimit){
var hiddingBox=$(this).parents(".list-item");
/*hiddingBox.removeClass("list-item").addClass("rafsal-test");*/
hiddingBox.hide();
console.log("Values IN:"+unitCost);
}
else{
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
console.log("Values OUT:"+unitCost);
}
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
});
}
});
// Brand Filter
$(".brandFilterCheckBox").on('click',function(){
$(".brand").each(function(){
var hiddingBox=$(this).parents(".list-item");
hiddingBox.removeClass("list-item").addClass("rafsal-test");
hiddingBox.hide();
});
$(".brandFilterCheckBox").each(function(){
if($(this).prop("checked")){
var filterBrand=$(this).attr("id");
$(".brand").each(function(){
var unitBrandName=$(this).text().trim();
if(unitBrandName== filterBrand){
console.log(unitBrandName);
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
}
});
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
}
});
})
var textCheck="##";
removeDuplicateBrands()
});
function removeDuplicateBrands(){
var textCheck="##";
$(".brandFilterCheckBox").each(function(){
$(this).attr('id');
if(textCheck.indexOf("##"+$(this).attr('id')+"##")==(-1)){
textCheck=textCheck+$(this).attr('id')+"##";
}
else{
$(this).parent("li").hide();
}
});
}
</script>
<script>
function searchBrand(element) {
var value = $(element).val();
$("#fromList li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
$(this).prevAll('.header').first().show();
} else {
$(this).hide();
}
});
removeDuplicateBrands();
}
</script>
</body>
so i am posting a photo in which my output is there it contains all products of a specified category i need only one product from each sub category of the specified category and the image contains four products of protection category and two sub categories air freshners and Head unit , air freshners contains three products i need to display only one from airfreshner and one from head unit in which we need
In Your Router Code, Edit this section
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
Change the above to this
categories1:function(cb){
Category.findOne({category_name:req.params.category_name}, cb);
}
That should solve it for you.