This is probably an easy question but I can't figure it out.
I want to change this handlebar code into ejs
{{#if hasErrors}}
<div class="alert alert-danger">
{{#each messages}}
<p>{{ this }}</p>
{{/each}}
</div>
{{/if}}
I tried but i'm getting syntax error
<%= if (Errors) {%>
<div class="alert alert-danger">
<%= each messages %>
<p><%= this%></p>
</div>
<% }%>
If your "hasError" variable is of type boolean, and your messages variable is an array of message strings;
<% if (hasErrors) {%>
<div class="alert alert-danger">
<% messages.forEach(function(message){ %>
<p><%= message %></p>
<% });%>
</div>
<% }%>
Related
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.
So the title might not be the best description of my problem because I don't really know how to sum up the problem. I have a forEach loop for each event in my database and each one is classified as type = to either "trip", "ropes course", or "other". I have a section for each type of event, but I would like a way where if there are no events in the section I can not display the bannertron header and if there are no events in the whole database I can display different HTML. My code also seems very WET and I would love any suggestions on how to DRY up this page.
<% include partials/header %>
<div class="image-text">
<img src="../images/trip-photo.jpg" class="bannertron">
<div class="centered">Upcoming Trips</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "trip"){ %>
</br>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
<% } %>
<% }); %>
</div>
<div class="image-text">
<img src="../images/climbing-photo.jpg" class="bannertron">
<div class="centered">Upcoming Climbing Days</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "ropescourse"){ %>
</br>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
<% } %>
<% }); %>
</div>
<div class="image-text">
<img src="../images/other-photo.jpg" class="bannertron">
<div class="centered">Other Events</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "other"){ %>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
</br>
<% } %>
<% }); %>
</div>
<% include partials/footer %>
Ideally, I would be able to loop through the events, check which type it is, put it in its respective area, and if there are none of a type, display some text like "no events scheduled" and if there are no events in total, display something else.
If this was me, I would split the events up into 3 different arrays in the node file, instead of sorting it all out inside of an ejs file. The Array.prototype.filter command would be useful for this. The nice thing about it is it returns a new array, with only items that return true for the function you pass in. It does not alter the original array, just passes a new one in. You can do something like
var trips = events.filter(function(event){
return event.type == "trip";
});
//do similar for "rope course", and for "other" you could do something like
return event.type != "trip" && event.type != "rope course"
// for the return statement.
You can do a
if(events.length == 0){
// show different html file
} else {
// show the html file with events, passing in the arrays
}
Make sure you pass all the arrays into the ejs file. For each array, you can do a similar
if(trips.length != 0){
// show banner and stuff
}
And do it for all three.
Hope this helps!
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.
I am getting a .forEach() error on this code
```<% if(locals.isAuthenticated) { %>
<section>
<h4>Leave a comment</h4>
<form method="POST" action="/landmarks/<%= landmark.id %>/comments">
<textarea name="content" id="content" placeholder="Comment"></textarea>
<button class="button">Leave a comment</button>
</form>
</section>
<% } %>
<section>
<h4>Comments</h4>
<% landmark.comments.forEach((comment) => { %>
<p><%= comment.content %></p>
<small><%= comment.createdBy.username %></small>
<small><%= comment.createdAt.toDateString() %></small>
<% if(locals.isAuthenticated && comment.belongsTo(user)) { %>
<form method="POST" action="/landmarks/<%= landmark.id %>/comments/<%= comment.id %>">
<input type="hidden" name="_method" value="DELETE">
<button class="btn">Delete Comment</button>
</form>
<% } %>
<% }) %>
</section>```
I am unsure why this is happening as I i believe this is correct syntax for the forEach method
I met a wield problem in node.js ejs template.
Here is the express code.
app.get('/course',function(req,res){
var locals = {};
locals.course = {
title: 'data.title',
city: 'data.city',
desc: 'data.desc',
id: 'data._id'
};
res.render('course_description',locals );
});
Here is the template code
<div >
<article>
<% if(locals.course) { %>
<div><% locals.course.title %></div>
<div><% locals.course.city %></div>
<div><% course.city %></div>
<div><% course.title %></div>
<% } %>
</article>
</div>
when res.render('course_description',locals ); is triggered, the local data should passed to the template, but for some unknown reason, it doesn't work for this example.
all I got is 4 empty
<div >
<article>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</div>
does anybody meet this wield problem before, I am so confused, I have done some working example before, but when I compare this with other working ones, I still can't find the reason.
Note, I am using the latest ejs and express
<% ... %> are for code constructions, not for output.
Try this:
<div>
<article>
<% if (locals.course) { %>
<div><%= locals.course.title %></div>
<div><%= locals.course.city %></div>
<div><%= course.city %></div>
<div><%= course.title %></div>
<% } %>
</article>
</div>