I am using the Forms library for Node.js (Forms), which will render a form for me on the backend as so:
var signup_form = forms.create({
username: fields.string({required: true})
, password: fields.password({required: true})
, confirm: fields.password({
required: true
, validators: [validators.matchField('password')]
})
, email: fields.email()
});
var signup_form_as_html = signup_form.toHTML();
The final line var signup_var signup_form_as_html = signup_form.toHTML(); creates a block of HTML which looks as such:
<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>
Basically just a long string of HTML. I then try to render it using EJS and Express using the following code:
res.render('signup.ejs', {
session: loginStatus(req)
, form: signup_form_as_html
});
But on rendering the HTML is simply the string that I posted above, rather than actual HTML (and thus a form as I want). Is there any way to make that string render as actual HTML using EJS? Or will I have to use something like Jade?
With EJS you can have several tags:
<% code %>
... which is code that is evaluated but not printed out.
<%= code %>
... which is code that is evaluated and printed out (escaped).
<%- code %>
... which is code that is evaluated and printed out (not escaped).
Since you want to print your variable and NOT escape it, your code would be the last type (with the <%-). In your case:
<%- my_form_content %>
For more tags, see the full EJS documentation
October 2017 update
The new ejs (v2, v2.5.7) development is happening here: https://github.com/mde/ejs
The old ejs (v0.5.x, 0.8.5, v1.0.0) is available here https://github.com/tj/ejs
Now with ejs you can do even more. You can use:
Escaped output with <%= %> (escape function configurable)
Unescaped raw output with <%- %>
Newline-trim mode ('newline slurping') with -%> ending tag
Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
Control flow with <% %>
So, in your case it is going to be <%- variable %> where variable is something like
var variable = "text here <br> and some more text here";
I had the same issue with rendering the textarea input from from a wysiwyg editor saved as html in my database. The browser will not render it but displayed the html as text. After hours of searching, I found out
<%= data %> escaped data while
<%- data %>left data 'raw'(unescaped) and the browser could now render it.
As per the ejs doc
<% 'Scriptlet' tag, for control-flow, no output
<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%# Comment tag, no execution, no output
<%% Outputs a literal '<%'
%> Plain ending tag
-%> Trim-mode ('newline slurp') tag, trims following newline
_%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it
Related
Hi i am trying to add condition for the render value in ejs file. i want to do something if value is equal to blah blah. I tried as shown below.
<% if (user) { %>
<div class="user_info">
<div>
<p>User Name<%= user.username %></p>
<p>User bio<%= user.user_bio %></p>
//here i want to put if else statement
//like this
<% if (user.user_age = null){ %>
<p>Your age is not defined. </p>
<% } %>
<% else if (user.user_age = 10){ %>
<p>You are a <%= user.user_age %> old tween!! </p>
<% } %>
<% else { %>
<p>You are a <%= user.user_age %> old Adult!! </p>
<% } %>
</div>
</div>
<% } else { %>
<p>No User!</p>
<% } %>
Clearly this if else statement i tried is not working.
How can i do this?
I have worked on this type of project something like that of whatsapp web,
its going to be a little hard because there are not many good tutorials out there, but I can give you some tips or steps you need to follow, to give the code would be very lengthy and its propriety code that I've worked on so I cant share that.
First of all to connect to server using a mobile or qr scanner you have to have a private or seperate socket to connect to the server. For that you can have to use web sockets which is a big task but you can use a simple socket library socket.io its fairly easy.
You will have to create a unique socket and key which you need to pass through the r itself(you have to render the qr code image through node js with the key as value) for that you can use 'qrcode' npm package.
For now your task here is done.
The difficult part starts here. You have to make an android/ios app to use that data which will use it in its own way, for ex in whatsapp when you can qr code from app it logs you in to your account and load contacts, messages, etc on the screen.
Im not an android or app developer for now, that part has to solved by you.
I am working on this: https://www.youtube.com/watch?v=6FOq4cUdH8k
For some reason, the following line is causing the error in the title.
<% include ./partials/messages %>
Removing the line above solves the problem.
I have confirmed that it is not the messages file as there are no slashes in it.
<% if(typeof errors != 'undefined') { %>
<% errors.forEach(function(error){ %>
<%= error.msg %>
<% }); %>
<% } %>
as you can read in the official documentation
Includes are relative to the template with the include call. (This
requires the 'filename' option.) For example if you have
"./views/users.ejs" and "./views/user/show.ejs" you would use <%-
include('user/show'); %>.
You'll likely want to use the raw output tag (<%-) with your include
to avoid double-escaping the HTML output.
so instead of
<% include ./partials/messages %>
Write
<%- include ("./partials/messages") %>
Why?
Template tag <%- outputs the unescaped value into the template, whereas <% 'scriptlet' tag is used for control-flow, no output. The parenthesis and " " are used for filename location
I am following The Net Nijna's tutorial on youtube.
I reached tutorial number 27, working with partials in ejs. Everything works until I add the <% include partials/nav.js %>, once I add this code I recieve:
SyntaxError: Unexpected identifier in (file location) testapp\views\profile.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass async: true as an option.
at new Function ()..... blah blah blah...
If I remove it, my ejs all works fine.
<body>
<% include partials/nav.ejs %>
<h1>Welcome to the profile of <%= person %> !</h1>
<p><strong> Age: <%= data.age %></strong></p>
<p><strong> Job: <%= data.job %></strong></p>
<p><strong> Pet: <%= data.pet %></strong></p>
<h2>Hobbies</h2>
<ul>
<% data.hobbies.forEach(function(item){ %>
<li><%= item %></li>
<%});%>
</ul>
</body>
can you help a student out? Thanks a ton!
Missing hyphen and need to invoke the include function.
<%- include('partials/nav') %>
I was stuck at the same problem and used -include('#filename');
it worked
Use: <%- include('folder/file') %>
agreeing with #Joseph Varilla
Not necessary to include engine extension as this should have been done in app.js or index.js file
Im new to nodejs , express and mongodb.
I got stuck at the findOne function using ObjectId of mongodb
With the code below, I got the error : "Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters"
Im using lastest version of everything (because Im new to them)
My code in view:
<% for(var i = 0 ; i < posts.length; i++ ) { %>
<% post = posts[i] %>
<article class="post">
<div class="post-preview col-xs-10 no-gutter">
<h2>
<a href="/posts/<%=i%>">
<%= post.title %>
</a>
</h2>
<p><%= post.description %></p>
<p class="meta">
<%= post.author.name %> in
<%= post.category.name %> <i class="link-spacer"></i> <i class="fa fa-bookmark"></i> <%= post.created_at %>
</p>
</div>
<div class=" col-xs-2 no-gutter">
<img src="<%= post.author.image %>" class="user-icon" alt="user-image">
</div>
</article>
<% } %>
Please tell me what's wrong with my code .
p/s : the req.params.id is valid and logable.
Default mongo IDs don't increment from 1. They will look like "_id" : ObjectId("5908f94c06515dfa8522459c") in the database. Your problem is your href is navigating by index, not the id itself. You need to change:
<a href="/posts/<%=i%>">
<%= post.title %>
</a>
to:
<a href="/posts/<%=post._id%>">
<%= post.title %>
</a>
this will make your link /posts/5908f94c06515dfa8522459c instead of /posts/1
I'm guessing it's because the id is a string of not 12 bytes (nor 24 hex characters). When the URL comes in to your express web server, it's a string. When express matches a part of it and stores it, there's no rule that :id couldn't be myCoolId, which isn't a number.
So everything in req.params is a string. I would add some checking to make sure it's a number, cast it, and then give it to ObjectId.
EDIT: If you want to work with it as strings, then try some of the following:
const ObjectID = require('mongodb').ObjectID;
// When making a brand new record, just use a new object id.
let record = new ObjectID();
console.log(record);
// When giving the ID to the client as a string, make it a hex string.
let hexString = record.toHexString();
console.log(hexString);
// You can validate that it's a valid object id in your route when they post it back.
let valid = ObjectID.isValid(hexString);
console.log(valid);
// Then you can turn it back into an object id.
let fromHex = ObjectID.createFromHexString(hexString);
console.log(fromHex);
I'm trying to figure out how to search multiple models with Ransack. The goal is to have the search form in my shared header. I'm using a combination of their documentation, an old rails-cast, SO questions, and some code a friend shared with me. Right now I think it works, although I'm not sure because I can't get the results to show on my index page.
First, I created a search controller:
class SearchController < ApplicationController
def index
q = params[:q]
#items = Item.search(name_cont: q).result
#booths = Booth.search(name_cont: q).result
#users = User.search(name_cont: q).result
end
end
Next, I put this code in the header partial (views/layouts/_header.html.erb):
<%= form_tag search_path, method: :get do %>
<%= text_field_tag :q, nil %>
<% end %>
I added a route:
get "search" => "search#index"
My index.html.erb for the Search controller is empty and I suspect that is the problem, but I'm not sure what to place there. When I try something like:
<%= #items %>
<%= #users %>
<%= #booths %>
This is the output I get when I execute a search:
#<Item::ActiveRecord_Relation:0x007fee61a1ba10> #<User::ActiveRecord_Relation:0x007fee61a32d28> #<Booth::ActiveRecord_Relation:0x007fee61a20790>
Can someone please guide me on what the solution might be? I'm not sure if it's an index view problem, routing problem, or something else. On all of the tutorials the search field and results are only for one model so I'm a little confused on how to pull this off across multiple models.
Thanks!
The output you are getting is correct. Each of those variables contains an ActiveRecord_Relation object which can be treated like an array. Normally you'd do something like:
<% #items.each do |item| %>
<%= item.name %> # or whatever
<% end %>
<% #users.each do |user| %>
# and so on
Alternatively, you could combine your results #results = #items + #booths + #users and then:
<% #results.each do |result| %>
# display the result
<% end %>