I am making a webpage and I have been looking on stackoverflow on how to link to .ejs-files from a .html-file.
People are saying the following
In index.html:
<li>Twitter</li>
In script.js:
app.get('/twitter',function(req,res){
res.render('twitter', { });
});
But it does not work for me. It says "Your file was not found". It works on localhost, but not when I first click on index.html and then click on twitter.ejs page from there. My code looks like this: jsfiddle.
twitter.ejs is in a view folders, while index is outside of this folder.
What is wrong?
The situation is you're trying to link directly to a view template.
You need to create a route to a twitter controller that then calls your template. It would look something like this:
router.get('/twitter', twitterController.twitter_view);
If your .ejs file is called "contact.ejs" as an example, then the route you're targeting may be something like "/contact".
First setup the contact route in your server code:
//Setting up the contact route
app.get("/contact", function (req, res) {
res.render("contact", {});
});
Update the href in the corresponding anchor tag to:
href="/contact"
I am using expressJS and EJS for this example. So these must be setup first.
Related
I am currently developing a website that will dynamically load the page content using ajax triggered by hash changes.
The code looks like this
$("*").delegate("a", "click", function () {
// Trigger Hash Change
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function () {
let newHash = window.location.hash.substring(1);
$("#main-content").load(newHash + " #ajax-content", function (responseTxt, statusTxt, xhr) {
}).hide().fadeIn();
});
Basically what I am working on now is making the URL look "Pretty", I have modified the .htaccess file to remove the .html extension
So a URL that looks like this
www.example.com/about.html
will become this
www.example.com/about
If I navigate the index (home) "www.example.com" page of the website and then navigate from there to the about page, the URL looks fine. "www.example.com#about" since the server does not display the "index" in the URL.
However, if I navigate straight to the about page like this www.example.com/about, then from the about page to another page, for example, the contact page. I get a URL that looks like this www.example.com/about#contact. When it should look like this www.example.com#contact.
My question is what is the best way to handle this? should I use jquery to redirect all to the index page and then add the hash to load the correct content? or is there some way I can not display the unnecessary part of the URL?
I hope my question was clear, I'm new to the server-side stuff involving the .htaccess file. FOr the ajax stuff I was following this tutorial from CSS tricks
https://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
You can use history.pushState
window.history.pushState("object or string", "Title", "/new-url");
The url will be www.example.com/new-url
in fact you can get history.state after use this method.
console.log(window.history.state)
output should be "object or string"
You can see the docs here.
Remember to use / to override the entire path.
To do what i think that you want, you can just override the url to / and set the hash.
This is probably not the best way to do this, but I have managed to redirect any page to the home page and then replace the / with the hash value so that the site wont end up wit "messy" URLs.
if(window.location.pathname != "/home.html")
{
window.location.replace("home.html" + window.location.pathname.replace("/", "#"));
}
what happens id the user navigates to "*www.example.com/about*" they will actually be sent to the homepage with the #about.html. So the never end up like this "*www.example.com/about#about*"
I'm trying to build a login system with Nodejs and express. I have a login page with the login forms using ejs.
In my index.html file there's a button that's supposed to direct the user to that login page:
<button id="loginBtn">
<LI> LOGIN </LI>
</button>
but it prints the ejs code of the login page instead of displaying the actual page. Anyone know what I'm doing worng?
To render a view, you only specify an endpoint in expressjs and call only that end point
You should not try to call the .ejs file location
Example: in this code login.ejs will automatically render behind the scene, the server library will do it, res.render('login') will automatically call login.ejs
router.get('/home', function(req, res, next) {
res.render('login');
});
You hyperlink should be calling the router mapping endpoint alone
<li> LOGIN </li>
once you decided using EJS, for UI designing purpose, if the UI designing part alone is given to you, then you can do a dummy code to render one EJS with fixed data, you don't have to run the entire website with DB
For example: there a data which is assumed which will render a EJS, to render with dummy data you can do this
Get the data from the developer who is doing his part and do this code
router.get('/home', function(req, res, next) {
var data = {"name": "Emmanuel"}
res.render('login', data);
});
as you can see the data is directly coded temporary
I'm building a fairly basic webpage using express. However, I'm having some trouble with my image pathways.
This code works fine.
app.use(express.static(path.join(__dirname, "/app/public/")));
app.get("/overview", function(req, res) {
res.render('some-file');
});
Inside of some-file.ejs I have...
<img src="assets/images/picture.jpg">
But what doesnt work is when I have a second url pathway.
app.get("/overview/specific", function(req, res) {
res.render('another-file');
});
<img src="assets/images/picture.jpg">
In this example I'm trying to load the exact same image (in my case its a banner thats reused on every single page). This gives me an error that the image is not found. What I've noticed from the console errors is that the image is being loaded from localhost:3000/overview/assets/images/picture.jpg
I don't understand why express is trying to load the image from whatever the first pathway is (overview in this case). Overview shouldnt be in the pathway!
Can anyone help me out debugging this issue?
Thanks in advance
Try to use /assets/images/picture.jpg.
Add / before the path. Then it will take /app/public/ as a root and be sure that the image will be at :
/app/public/assets/images/picture.jpg
Now wherever you want picture.jpg just pass this absolute path.
We serve favicons dynamically using an ExpressJS redirect, it works very well.
First, we retrieve the site object from memory with a quick lookup based on req.hostname, then send this response:
res.redirect(site.favicon);
The favicon variable could be a static asset on our server, or an asset on another server too. Our front-end code just calls /api/resources/favicon and it will receive the correct link in return.
I have a sub html (template) products.html, that I included in my index.html page with JavaScript/jquery function .load()
Now the problem is products.html can be access directly if you type its url, and it gives a very ugly page alone, so I tried to redirect anyone who tries to access it to index.html using JS function windows.location. The problem with this method is, when my template is loaded in my main page, the js script fires, and it leads to refresh to the page. So is there another way to go about this !?
You can define a variable like window.parentPage = true;
in the index.html file.
In the products.html page make a check like so:
if(!window.parentPage)
{
window.location.href = "YOUR REDIRECTION PAGE"
}
Another alternative:
<body onload="if (document.referrer == '') self.location='index.html';">
I'm trying to send a hyperlink (such as: "http://google.com") as a parameter to my Express server script. My current script looks like this:
var app = require("express")();
app.get("/new/:link(*)", function(req, res){
var link = req.params.link;
res.end(JSON.stringify({
site: link
}));
});
app.listen(process.env.PORT || 3000, function(){
console.log("Listening...");
});
This is just a test to see if I can get it working so I can build something bigger on top. The idea is that I can send a link and receive the link in JSON. However when I try to go to the site with the the link as parameter, my browser want to save a file called "google.com" and it doesn't receive any JSON from the server.
I know it's possible to do this without changing anything about my browser but I don't know how. Anyone has any ideas?
Ok, so I have accidentally fixed my problem.
Apparently i had to write "res.send(...)" instead of "end". It now works perfectly although I don't really understand why.