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.
Related
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.
I have around 20+ HTML files. I would like to render them, when requested as host/filename.html, without having to use response.render for each file. If I simply move my views folder in public folder (and set views of express accordingly), the browser is not rendering these HTMLs. Rather, I see the code on the screen. Can someone please advice on this?
You can try using something like this:
'/someRoute': (req, res, next) => {
res.status(200).sendFile(process.cwd() + '/views/index.html');
}
Is there any best practise code pattern how to process HTML form data with express and jade templates? I was wondering, if it would make sense to use a PHP like self calling loop of the form template, say in your router script you have two handler for the same route, one for GET and the other for POST requests. Something like:
exports.getHandler = function(req, res){
res.render('/formhandling/', {mode: "form-filling"});
}
exports.postHandler = function(req, res){
res.render('/formhandling/', {mode: "form-processing"});
}
and the jade template might look like
extends layout
block content
h1 #{title}
if mode == "form-processing"
p Form data processed...
else
form(name="", method="post", action="/formhandling/")
...
Does that make any sense or did I get something completely wrong?
I feel like you could just use jQuery to hide the form after the user submitted, instead of rendering the response again. If you want to do any processing of the form on the server side, you can do that in your app.js.
app.get('/', routes.form);
app.post('/', function(res,req){
/* form processing here
you could also do this with an external route */
});
Edit: Also, see my answer on this question
I just started experimenting with node & express, and am trying to load the content of various HTML files into a single web page with Ajax.
I want the URL shown in the address bar to reflect the actual file structure on my server; so for instance when a user clicks a link with href="posts/thePost.html", instead of actually going to that page, I use click(), preventDefault(), and Ajax to load the content in a div, then pushState() and window.onpopstate to make the address bar show the relative path of the file. I do not want to use the hash (#) symbol or queries (?=) or anything like that, I want normal URLs.
This works fine, but when I refresh the page, the file located at the URL (i.e. posts/thePost.html) is displayed instead of index.html with the loaded content. Is there a way to use node to fix this, maybe by intercepting the request and displaying the content of index.html instead? I've tried to search this but haven't been having any luck.
Sorry if this sounds confusing. In short, the behavior that I'm looking for is that no matter what URL the address bar shows when the page is refreshed, index.html should be served up instead.
That's rather easy to do:
function serveIndex(req, res) {
return res.sendfile('index.html');
}
app.get('*', serveIndex);
app.head('*', serveIndex);
You'll likely want to put this after your other routes so you don't end up clobbering them.
var routes = require('./routes/index');
app.use('/',routes);
app.use('/index',routes);
function serveIndex(req, res) {
res.redirect('/');
}
app.get('*', serveIndex);
I'm having trouble conceptualizing how to render menus with active states in an Express app using Jade view partials.
I have something like this:
ul.menu
li
a(href='/some/route').active
li
a(href='/another/route')
What I'd like is for the .active class to be applied to the current route, so my CSS can render an active UI state.
When I wrote in PHP, this would've been accomplished through some complex chain of if/else, statements, but I'm assuming there's a more elegant approach. What am I missing?
My solution is similar to danmactough's, but I think a little tidier.
I use middleware to save the url as a local variable on all requests. Make sure this comes before your routes.
app.use(function(req, res, next) {
res.locals.url = req.url;
next();
});
My Jade template for a menu looks like this
ul
each link in links
li
a(href=link.url, class=link.url === url && 'active')= link.name
Jade is ignorant about the route. I don't think there's any way to avoid the if/else in one form or another.
In Express, just pass the route as a local:
res.render('my_view', {
current: 'current/url'
});
And in the view, have an array of menu links and do something like:
ul.menu
for each item in links
li
if (item.url == current)
a(href=item.url).active
else
a(href=item.url)