Issue while using ejs syntax - node.js

This is my ejs file(_post.ejs):
<link rel="stylesheet" href="/css/home.css">
<div id="home-container">
<% if(locals.user){%>
<section id="feed-posts">
<h4>Posts</h4>
<form action="/posts/create" method="post" id="new-post-form">
<textarea name="content" cols="30" rows="3" placeholder="Type here..." required></textarea>
<input type="submit" value="Post">
</form>
</section>
<%}%>
<section id="posts-wall" >
<ul>
<% for(post of Posts){ %>
<%- include('_post') -%>
<hr>
<% } %>
</ul>
</section>
<section id="user-friends">
<h4>Friends</h4>
<% for(u of all_users){%>
<p>
<%= u.username %>
</p>
<%}%>
</section>
</div>
<script src="/js/home_posts.js"></script>
Error :
Error: /Users/nishantbhatia/Desktop/nodews/codial/views/home.ejs:17
15| <ul>
16| <% for(post of Posts){ %>
>> 17| <%- include('_post') -%>
18| <hr>
19| <% } %>
20| </ul>
I have included the closing tags as well. Really not sure abt the error. Any help would be appreciated.I tried to read the documentation still no clue.

The syntax should be ,remove - from closing tag. See the docs
<section id="posts-wall" >
<ul>
<% for(post of Posts){ %>
<%- include('_post') %>
<hr>
<% } %>
</ul>
</section>

Related

getting error in EJS file while running res.render

getting this error:
missing ) after argument list in C:\Users\yoniy\Desktop\YelpCamp\views\campgrounds\index.ejs while compiling ejs
and it's the index.ejs file :
<!-- <%- include "../partials/header" %> -->
<header class="jumbotron">
<div class="container">
<h1><span class="glyphicon glyphicon-tent"></span> Welcome To YelpCamp!</h1>
<p>View campgrounds from all over the world</p>
<p>
<a class="btn btn-primary btn-lg" href="/campgrounds/new">Add New Campground</a>
</p>
<p>
<form action="/campgrounds" method="GET" class="form-inline" id="campground-search">
<div class="form-group">
<input type="text" name="search" placeholder="Campground search..." class="form-control">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center flex-wrap" id="campground-grid">
<%- campgrounds.forEach(function(campground){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
<p>
More Info
</p>
</div>
</div>
<%- }); %>
</div>
<!-- <%- include "../partials/footer" %> -->
can't find the syntax error that I get.
thanks for help !
You need to use flow control tags <% for non output parts of your template. In this case the following lines need to be changed:
<%- campgrounds.forEach(function(campground){ %>
Should instead be:
<% campgrounds.forEach(function(campground){ %>
And this line:
<%- }); %>
Should be:
<% }); %>
Update for additional Error
Your formatting for including additional files is incorrect:
<!-- <%- include "../partials/header" %> -->
Should be:
<%- include("../partials/header.ejs") %>
Same for the footer:
<!-- <%- include "../partials/footer" %> -->
Should be:
<%- include("../partials/footer.ejs") %>
Though I cannot validate your paths are correct as I do not know your directory structure.

problem while accessing to partial views in express

here's my views file: views/profile.ejs
<body>
<% include partial/nav.ejs %>
<!-- <%- include('partial/nav.ejs'); %> -->
<h1> Welcome to <%= person %> profile</h1>
<p>
<strong>The age: </strong><%= proObj.age%>
</p>
<p>
<strong>Relationship Status: </strong><%= proObj.relation_status%>
</p>
<div>
<p>
<strong>Hobbies: </strong>
<% hobbies.forEach(function(item){ %>
<li> <%= item %> </li>
<% }); %>
</p>
</div>
</body>
and this partial views file: views/partial/nav.ejs
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
when i reload the website i got this error popped into the server
SyntaxError: Unexpected identifier in C:\Users\Fo0ola\Desktop\SERVER-SIDE\views\profile.ejs while compiling ejs

Reference Error on Index Page with Twitter Cards EJS

I have the following code in my header.ejs file for my Twitter card.
<head>
...
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#DrDenverHBubble">
<meta name="twitter:creator" content="#DrDenverHBubble">
<meta name="twitter:title" content="<%= blog.title %>"></meta>
<meta name="twitter:image" content="<%= blog.image %>"></meta>
</head>
...
On my show.ejs page, my webpage display correctly and the Twitter card displays correctly as well on Twitter.
However, on my index.ejs page, I get the following error with the below code
ReferenceError: /home/ubuntu/workspace/drdenver/views/blogs/index.ejs:1
>> 1| <% include ../partials/header %>
2|
3|
4|
/home/ubuntu/workspace/drdenver/views/partials/header.ejs:16
14| <meta name="twitter:site" content="#DrDenverHBubble">
15| <meta name="twitter:creator" content="#DrDenverHBubble">
>> 16| <meta name="twitter:title" content="<%= blog.title %>"></meta>
17| <meta name="twitter:image" content="<%= blog.image %>"></meta>
18| </head>
19| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
blog is not defined
Here is the index.ejs code
<% include ../partials/header %>
<div id="blog-index" class="container">
<div class="row" style="display: flex; flex-wrap:wrap;">
<div class="col-lg-12">
<% if(noMatch !== null) { %>
<h4> <%= noMatch %> </h4>
<% } %>
</div>
<% blogs.forEach(function(blog){ %>
<div class="col-lg-12">
<div class="ui medium rounded items">
<div class="item">
<div class="image">
<img src="<%= blog.image %>">
</div>
<div class="content">
<a class="header" href="/blogs/<%= blog._id %>"><%=blog.title%></a>
<div class="meta">
<span><%= blog.created.toDateString() %></span>
</div>
<div class="extra">
<% if(blog.body && blog.body.length > 0) { %>
<p><%- blog.body.substring(0, 120) %> ... </p>
<% } %>
Read More
</div>
</div>
</div>
</div>
</div>
<% }) %>
</div>
...
I am a new coder, but I understand that I am not passing anything into the variable blog which is causing my error. My solution was to on the show page remove the <% include ../partials/header %> and insert the header code with twitter card code and in the header.ejs page remove the Twitter card code. Is there a more DRY way of coding this?
Thanks
Your problem is, You are including header.ejs file which needs blog data. But you are not passing blog data to it. Change your include line to following
<%- include('../partials/header', {blog: blog}); %>

Why is my JS logic appearing on index (using ejs/express)

im having an issue understanding why my JS is appearing on my layout. Im currently following along with a tutorial on sitepoint creating forms with in express and when i render the layout.ejs + index.ejs with contact as a partial, the logic on partial is appearing on the page as text.
here is the code:
<div class="form-header">
<% if (Object.keys(errors).length === 0) { %>
<h2>Send us a message aa</h2>
<% } else { %>
<h2 class="errors-heading">Oops, please correct the following:</h2>
<ul class="errors-list">
<% Object.values(errors).forEach(error => { %>
<li><%= error.msg %></li>
<% }) %>
</ul>
<% } %>
</div>
<form method="post" action="/contact" novalidate>
<div class="form-field <%= errors.message ? 'form-field-invalid' : ''
%>">
<label for="message">Message</label>
<textarea class="input" id="message" name="message" rows="4"
autofocus><%= data.message %></textarea>
<% if (errors.message) { %>
<div class="error"><%= errors.message.msg %></div>
<% } %>
</div>
<div class="form-field <%= errors.email ? 'form-field-invalid' : '' %>">
<label for="email">Email</label>
<input class="input" id="email" name="email" type="email" value="<%=
data.email %>" />
<% if (errors.email) { %>
<div class="error"><%= errors.email.msg %></div>
<% } %>
</div>
<div class="form-actions">
<button class="btn" type="submit">Send</button>
</div>
</form>

SilverStripe (3.6.2) Search returning assets folder contents

I haven't enabled Search on SilverStripe before, but it seems pretty easy. I've followed steps from 2 other projects (although they are 3.5 version projects but not sure that makes a difference or not) that have search enabled as well as the tutorial offered on SilverStripe's site, and for some reason, I'm getting asset folder items (i.e. images) in my search results. It only seems to happen if I click to search and nothing has been entered into the search field.
There should be no asset items returned at any time for search, and if there is no search query, then there should be a message saying nothing was entered or something. I noticed that using the default $SearchForm setup provided by the basic install gives me the desired results, but not for the form I'm using (which does work on 2 other SilverStripe sites--I checked and confirmed).
I'm not sure what I'm missing? I feel like everything is done correctly, and I would like to use the setup I have now to give me more styling ability:
From _config.php:
FulltextSearchable::enable();
From my Header.ss file:
<!-- SEARCH BAR -->
<form class="navbar-form navbar-left nav-right-left search-form" id="SearchForm_SearchForm" action="/home/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
<fieldset style="font-size: 0;">
<div class="field text nolabel search-holder">
<input name="Search" placeholder="Search" class="form-control search-field text nolabel active search-box" />
</div>
<div class="ja-search-box">
<button class="icon search-button smiths-search-btn" type="submit"><i class="glyphicon glyphicon-search pull-right"></i></button>
</div>
</fieldset>
</form>
The Search Results page:
<div class="main" role="main">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="Content" class="searchResults">
<h1 class="brand-red">$Title</h1>
<% if $Query %>
<p class="searchQuery">You searched for "{$Query}"</p>
<% end_if %>
<% if $Results %>
<ul id="SearchResults">
<% loop $Results %>
<li>
<h4>
<a href="$Link">
<% if $MenuTitle %>
$MenuTitle
<% else %>
$Title
<% end_if %>
</a>
</h4>
<% if $Content %>
<p>$Content.LimitWordCountXML</p>
<% end_if %>
<a class="readMoreLink" href="$Link" title="Read more about "{$Title}"">Read more about "{$Title}"...</a>
</li>
<% end_loop %>
</ul>
<% else %>
<p>Sorry, your search query did not return any results.</p>
<% end_if %>
<% if $Results.MoreThanOnePage %>
<div id="PageNumbers">
<div class="pagination">
<% if $Results.NotFirstPage %>
<a class="prev" href="$Results.PrevLink" title="View the previous page">←</a>
<% end_if %>
<span>
<% loop $Results.Pages %>
<% if $CurrentBool %>
$PageNum
<% else %>
$PageNum
<% end_if %>
<% end_loop %>
</span>
<% if $Results.NotLastPage %>
<a class="next" href="$Results.NextLink" title="View the next page">→</a>
<% end_if %>
</div>
<p>Page $Results.CurrentPage of $Results.TotalPages</p>
</div>
<% end_if %>
</div>
</div>
</div>
</div>
</div>
By default, the full text search will search array('SiteTree', 'File')
http://api.silverstripe.org/en/3.1/class-FulltextSearchable.html
I would try changing your FulltextSearchable::enable(); line to FulltextSearchable::enable(array('SiteTree'));
I haven't tried this before and am not sure if it will work.

Resources