How to transit another ejs file in Node.js - node.js

When I develop ejs file, I would like to transit to another ejs by clicking button.
But when I try to click and trnasit to quiz.ejs,nothing happend.
Are there any wrong point in ejs ?
And how to fix them?
Thanks
following is a part of my ejs file.
<button onclick = "href = '/quiz'">start</button>
And following is my Router.
router.get('/quiz',(req,res)=>{
res.render(Views+'quiz.ejs');
});
following is a part of my app.js
app.use('/quiz',Router);

Firstly you don't transit to any ejs file. You transit to another route which renders an ejs file.
So all you need to do is
Create a ejs file, lets say 'quiz.ejs'
Add a route to render this -
router.get('/quiz',(req,res)=>{
res.render('quiz');
});
And then finally redirect the user to quiz route.
<a "href = '/quiz'>To Quiz</button>
Also note that you need <a> anchor tag to navigate not a button.

Related

Why res.render() doesn't send local variables to the client without template engine?

I need to access the variable user in my client-side that sent by
res.render('home.html', { user: req.user });
without using template engines like pug or ejs
Is that possible?
HTML is not a templating language, so it can't be used to send variables.
res.render() function compiles your template , inserts locals there, and creates html output out of those two things. The syntax is as follows -
res.render(view [, locals] [, callback])
The view argument is a string that is the file path of the view file to render. For this to work, you need a template or view engine .
In html, you can't dynamically pass/insert data variables. That's the main use case for templating engine. They put runtime/dynamic value in html which is what you are probably looking for.
In short, its better to use any template engine like pug,jade,ejs, etc most of which would have almost similar syntax with html to render dynamic html pages. I don't think there's any method (atleast simple enough) to send variables dynamically from server to client in an html page. Using a template engine would be the best choice in your use case.
For eg. you are passing user from server side and most probably want the passed variable to be rendered on the client side. You can just install an view engine like ejs - npm install ejs, set your view engine in app.js - app.use('view engine','ejs'); , and just add this line in the html page where you want to send the variable to client side like - <p> <%= user %> </p> and that's it. Keep your html file in view folder and this would do it.

How to pass data from Node server to ejs header

I am trying to create a Node website with a header ejs file that is included on each page.
When I load my index.ejs page, I would also like to pass a variable from my server to my header page.
I could be wrong, but it seems like the best way to do that is to pass that variable from the server, to the index page, then to the header.
Currently, the only example I've seen of this is the following code snippet:
<%- include("header",{title:"your_title"}) %>
The catch is that I would need to replace "your_title" with a title variable that I set serverside.
Is there a way to do this?
My hunch is that it may look like the following:
<% runHeader = function(title){ %>
<%- include('../partials/header', {title: title}); %>
<%}; %>
Unfortunately, include does not seem to run properly here, and the header does not load at all.
Any help would be much appreciated!
so the best way I found for this to work is to make a a "views" folder under your project folder. The views folder will have an ejs file with the name of "title.ejs" the call should then look like <%- include("title") -%>this will look for the ejs file in the same directory. I'd say in the title file add some sample HTML then everything should work.
Make sure that you have NPM installed ejs, then in nodefile use const ejs = require("ejs"); and app.set('view engine', 'ejs'); and app.use(express.static("public"));in the same node.js file.
Hope this makes sense and good luck.

How to send a file into an iframe with node-express?

I want to load a html file into an iframe, with express. A have a < a > tag, and when I click on it, the iframe appears. The frame loads, but I obviously get a "CANNOT GET" message in it, because I don't have the appropriate routing. I have the following code snippets.
index.html:
<a id="ASZF">Adatvédelmi Szabályzat</a>
<iframe id="ASZFframe" src="ASZF.html"></iframe>
server.js:
app.get("/ASZ",function(request, response){
response.sendFile(path.join(__dirname+"/ASZ.html"));
});
Should I use < a href="?" >, or something else?
Your express is not made aware of that route. Your route should be:
app.get("/ASZF.html", function(req, res) {...});
But you probably want to look into serve-static instead of creating a controller just for this.

res send 2 html files in Nodejs

I'm devloping a sample website in order the learn Node.js with express. In a routes file I have this code to render a page:
app.get('/new-product', requireLoggedIn, function(req,res){
res.sendFile(path.join(__dirname+'/../views/new-product.html'));
res.set('Access-Control-Allow-Origin', '*');
});
Is there a way I could have the page header (with the logo, menus, etc) in a separated html file so I can load the header in all pages from the same file, and the content of each page in another file?
in order to load a piece of page in all pages , you need to use the EJS engine in place of html , just use <% include name_of_the_view %> in your ejs page and each time this page 'll be rendered , the name_of_the_view will be rendered with it
learn more :
http://www.embeddedjs.com/

How to get username injected into html?

I have a static html site:
index.html
I want to use handlebars {{username}} to inject a username variable. It looks like:
res.render('index', {username:'MyName'})
should work. The problem is my index.html is in my '/static' (my express.static()) directory. What is the best way to get my username variable into my html page without having to convert it to something that doesn't look like html? Thats why I dont want to use jade and prefer handlebars. If there is some other way, it would be best.
Update: I would like to preserve the same structure I have (keeping everything in my static directory) as opposed to moving things out to a "views" directory. Is this possible?
Then you must have to use Template engine. You can use Jade it also support HTML, only you have to use . at end of tag like:
doctype 5
html. // THAT DOT
<body>
<div>This is jade testing with HTML</div>
</body>
Is there a way to keep the file in my /static directory without having
to put it in the "views" directory?
Yes you can use _dirname while rendering
app.get('/anyurl/' , function(req, res){
res.render(__dirname + '/../static/path/folder') //modify path according to your structure
});

Resources