I'm getting reference error in every route like: "/","/product" even though that variable is not used on those routes.Although pages load fine with no errors in front but it shows error in terminal .Please help it i'm trying to figure out for days and not able to continue with my project
app.js:`
app.get("/", function(req, res){//landing page
product.find({},function(error,indexproduct){
if (error) {
console.log(error);
}else{
res.render("index",{indexproduct:indexproduct});
}
});
});`
index.ejs:
<% include partials/header %>
<!-- Start slider -->
<section id="aa-slider">
<div class="aa-slider-area">
<div id="sequence" class="seq">
<div class="seq-screen">
<ul class="seq-canvas">
<!-- single slide item -->
<li>
<div class="seq-model">
<img data-seq src="/img/slide8.jpg" alt="Men slide img" />
</div>
<div class="seq-title">
<span data-seq>Save Up to 75% Off</span>
<h2 data-seq>Men Collection</h2>
<p data-seq>Best Place to Buy Awesome Men's Clothing</p>
<a data-seq href="/category/men" class="aa-shop-now-btn aa-secondary-btn">SHOP NOW</a>
</div>
</li>
<!-- single slide item -->
<li>
<div class="seq-model">
<img data-seq src="/img/slide10.jpg" alt="Wristwatch slide img" />
</div>
<div class="seq-title">
<span data-seq>Save Up to 40% Off</span>
<h2 data-seq>Kids Clothing Collection</h2>
<p data-seq>Style your Kid's with latest Trends</p>
<a data-seq href="/category/kid" class="aa-shop-now-btn aa-secondary-btn">SHOP NOW</a>
</div>
</li>
<!-- single slide item -->
<li>
<div class="seq-model">
<img data-seq src="/img/slide4.jpg" alt="Women Jeans slide img" />
</div>
<div class="seq-title">
<span data-seq>Save Up to 75% Off</span>
<h2 data-seq>Women Dress Collection</h2>
<p data-seq>Style your Own Life with our trendy cloths</p>
<a data-seq href="/category/women" class="aa-shop-now-btn aa-secondary-btn">SHOP NOW</a>
</div>
</li>
<!-- single slide item -->
<!-- single slide item -->
</ul>
</div>
<!-- slider navigation btn -->
<fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons">
<a type="button" class="seq-prev" aria-label="Previous"><span class="fa fa-angle-left"></span></a>
<a type="button" class="seq-next" aria-label="Next"><span class="fa fa-angle-right"></span></a>
</fieldset>
</div>
</div>
</section>
<!-- / slider -->
<!-- Start Promo section -->
<section id="aa-promo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="aa-promo-area">
<div class="row">
<!-- promo left -->
<div class="col-md-5 no-padding">
<div class="aa-promo-left">
<div class="aa-promo-banner">
<img src="/img/slide5.jpg" alt="img">
<div class="aa-prom-content">
<span>75% Off</span>
<h4>For Women</h4>
</div>
</div>
</div>
</div>
<!-- promo right -->
<div class="col-md-7 no-padding">
<div class="aa-promo-right">
<div class="aa-single-promo-right">
<div class="aa-promo-banner">
<img src="/img/slide6.jpg" alt="img">
<div class="aa-prom-content">
<span>Exclusive Item</span>
<h4>For Men</h4>
</div>
</div>
</div>
<div class="aa-single-promo-right">
<div class="aa-promo-banner">
<img src="/img/slide3.jpg" alt="img">
<div class="aa-prom-content">
<span>Sale Off</span>
<h4>On Every Ladies Dress</h4>
</div>
</div>
</div>
<div class="aa-single-promo-right">
<div class="aa-promo-banner">
<img src="/img/slide9.jpg" alt="img">
<div class="aa-prom-content">
<span>New Arrivals</span>
<h4>For Kids</h4>
</div>
</div>
</div>
<div class="aa-single-promo-right">
<div class="aa-promo-banner">
<img src="/img/slide1.jpg" alt="img">
<div class="aa-prom-content">
<span>25% Off</span>
<h4>For Men's Clothing</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- / Promo section -->
<!-- banner section -->
<section id="aa-banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="aa-banner-area">
<img src="/img/slide2.jpg" alt="fashion banner img">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- popular section -->
<section id="aa-popular-category">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="aa-popular-category-area">
<!-- start prduct navigation -->
<ul class="nav nav-tabs aa-products-tab">
<li class="active">Exclusive</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Start men popular category -->
<div class="tab-pane fade in active" id="popular">
<ul class="aa-product-catg aa-popular-slider">
<!-- start single product item -->
<%=console.log(indexproduct)%>
</ul>
<a class="aa-browse-btn" href="/product">Browse all Product <span class="fa fa-long-arrow-right"></span></a>
</div>
<!-- / popular product category -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- / popular section -->
<!-- Support section -->
<section id="aa-support">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="aa-support-area">
<!-- single support -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="aa-support-single">
<span class="fa fa-truck"></span>
<h4>FREE SHIPPING</h4>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, nobis.</P>
</div>
</div>
<!-- single support -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="aa-support-single">
<span class="fa fa-clock-o"></span>
<h4>30 DAYS MONEY BACK</h4>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, nobis.</P>
</div>
</div>
<!-- single support -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="aa-support-single">
<span class="fa fa-phone"></span>
<h4>SUPPORT 24/7</h4>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, nobis.</P>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- / Support section -->
<% include partials/footer %>`
Error:
`ReferenceError: C:\Users\nishantk\Desktop\project200\renclo\views\index.ejs:156
154| <ul class="aa-product-catg aa-popular-slider">
155| <!-- start single product item -->
>> 156| <%=console.log(indexproduct)%>
157| </ul>
158| <a class="aa-browse-btn" href="/product">Browse all Product <span class="fa fa-long-arrow-right"></span></a>
159| </div>
indexproduct is not defined
at eval (C:\Users\nishantk\Desktop\project200\renclo\views\index.ejs:74:37)
at index (C:\Users\nishantk\Desktop\project200\renclo\node_modules\ejs\lib\ejs.js:682:17)
at tryHandleCache (C:\Users\nishantk\Desktop\project200\renclo\node_modules\ejs\lib\ejs.js:254:36)
at View.exports.renderFile [as engine] (C:\Users\nishantk\Desktop\project200\renclo\node_modules\ejs\lib\ejs.js:485:10)
at View.render (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\response.js:1012:7)
at C:\Users\nishantk\Desktop\project200\renclo\app.js:396:9
at Layer.handle [as handle_request] (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\index.js:281:22
at param (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\index.js:354:14)
at param (C:\Users\nishantk\Desktop\project200\renclo\node_modules\express\lib\router\index.js:365:14)
`
Related
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
So I have a local project running ExpressJS and I'm using ejs as my template engine. Whenever I start the server and go to the home page the index.html file renders properly, but every subsequent load of the index gives me the un-rendered index.html file and the status is 304. All other pages render fine everytime. If I restart the server, the first time I hit the home page it is rendered correctly, but still serves the un-rendered file after every page load after that. If I put a breakpoint in the route (I'm using WebStorm) I can hit the break point the first time, but never again. I assume this is because of the 304. I also have app.disable('etag'). Any help is much appreciated.
UPDATE
This is what is the browser will display when receiving a 304 status.
<%- include('includes/header.html'); %>
<%- include('includes/navigation.html'); %>
<!-- Top Slider and Booking form -->
<div id="home-top-section">
<!-- Main Slider -->
<div id="main-slider">
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/1.jpg" alt="3"/><!-- Change the URL section based on your image\'s name -->
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/3.jpg" alt="3"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/4.jpg" alt="4"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/2.jpg" alt="2"/>
</a>
</div>
</div>
<!-- Booking Form -->
<div class="booking-form-container container">
<div class="booking-form-inner-container">
<div id="main-booking-form" class="style-2">
<h2>Find A <span>Room</span></h2>
<form class="booking-form clearfix" action="#"><!-- Do Not remove the classes -->
<div class="input-daterange clearfix">
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check in date" class="datepicker-fields check-in" type="text" name="start" /><!-- Date Picker field ( Do Not remove the "datepicker-fields" class ) -->
<i class="fa fa-calendar"></i><!-- Date Picker Icon -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check out date" class="datepicker-fields check-out" type="text" name="end" />
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="booking-fields col-xs-6 col-md-12">
<!-- Select boxes ( you can change the items and its value based on your project's needs ) -->
<select name="room-type">
<option value="">How Many Adult?</option><!-- Select box items ( you can change the items and its value based on your project's needs ) -->
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
</select>
<!-- End of Select boxes -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<select name="guest">
<option value="">How Many Children ?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="booking-button-container">
<input class="btn btn-default" value="Check Availability" type="submit"/><!-- Submit button -->
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of Top Slider and Booking form -->
<!-- Luxury Rooms -->
<div id="luxury-rooms">
<!-- Heading box -->
<div class="heading-box">
<h2>Luxury <span>Rooms</span></h2><!-- Title -->
<div class="subtitle">Best rooms with Best services</div><!-- Subtitle -->
</div>
<!-- Room Box Container -->
<div class="room-container container">
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/1.jpg" alt="King Suit" class="room-img"><!-- Room Image -->
<div class="room-details col-xs-6 col-md-4">
<div class="title">King Suit</div><!-- Room title -->
<div class="description"><!-- Room Description -->
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details<!-- Detail link -->
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$550</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes right">
<img src="assets/img/rooms/2.jpg" alt="Royal Suit" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Royal Suit</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$490</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/3.jpg" alt="Deluxe Two-bedroom Suite" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Deluxe Two-bedroom Suite</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$370</span>
- Per Night
</div>
</div>
</div>
</div>
</div>
<!-- End of Luxury Rooms -->
<!-- Special Packages -->
<div id="special-packages" class="container">
<!-- Heading box -->
<div class="heading-box">
<h2>Special <span>Packages</span></h2><!-- Title -->
<div class="subtitle">Choose one of our special offers</div><!-- Subtitle -->
</div>
<!-- Package Container -->
<div class="package-container clearfix">
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4">
<div class="package-inner">
<div class="title">Diamond</div>
<div class="price"><span>$450</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch / Dinner )</li>
<li>Music Concert</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="0.5s">
<div class="package-inner">
<div class="title">Gold</div>
<div class="price"><span>$340</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch )</li>
<li>Music Concert ( 50% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="1s">
<div class="package-inner">
<div class="title">Silver</div>
<div class="price"><span>$230</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( 20% off Lunch )</li>
<li>Music Concert ( 30% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
</div>
</div>
<!-- End of Special Packages -->
<!-- Gallery -->
<div id="gallery">
<!-- Heading box -->
<div class="heading-box">
<h2>Pinar <span>Gallery</span></h2><!-- Title -->
</div>
<!-- Gallery Container -->
<div class="gallery-container">
<div class="sort-section">
<div class="sort-section-container">
<div class="sort-handle">Filters</div>
<ul class="list-inline">
<li>All</li>
<li>Restaurant</li>
<li>Bars</li>
<li>Pool</li>
<li>Rooms</li>
<li>Lobby</li>
</ul>
</div>
</div>
<ul class="image-main-box clearfix">
<li class="item col-xs-6 col-md-3 lobby">
<figure>
<img src="assets/img/gallery/1.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Great</span> View</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/2.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Outdoor</span> Pool</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 bars">
<figure>
<img src="assets/img/gallery/3.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Delicious</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 restaurant">
<figure>
<img src="assets/img/gallery/4.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>International</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/5.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Cozy</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 rooms">
<figure>
<img src="assets/img/gallery/6.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Comfortable </span> Rooms</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/7.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Relaxation</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/8.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Indoor</span> Pool</h4>
</figcaption>
</figure>
</li>
</ul>
More ...
</div>
</div>
<!-- End of Gallery -->
<%- include('includes/footer.html'); %>
instead of the rendered version. Notice the includes at the top and bottom of the page.
So, the issue was simply because I was using .html templates instead of .ejs. Word to the wise, if you buy a template that has static .html files and want to use a templating engine such as .ejs, make sure you change .html to .ejs or you will run into all types of issues.
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
how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before
I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/
I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.