Why is "/" used for rendering the index page - javascript

I am confused what the "/" is used for in this piece of code:
app.get("/", (req, res) =>// The / is a shortcut for index.html (might be right could be wrong)
{
res.render(index);
});

Traditional and convenience.
Given the domain example.com, you want the homepage to be at https://example.com/ (i.e. the path, which comes immediately after the domain name, is /) so you don't need to type https://example.com/anything-here.

In your example, the default page of the website, i.e example.com, would render the index page.
However if you wish to make a different page, such as example.com/about you would use /about and render the about page.
e.g. for your code
app.get("[Whatever directory]" ...)
{
res.render([whatever page])
...

Related

JavaScript Redirect to Page Another website based on URL

Using JavaScript, how can I make it redirect to another site based on the URL?
(Example)
If someone goes to https://example.com/12345, it will redirect them to https://example.net/12345.
And if someone goes to https://example.com/abc123456, it will redirect them to https://example.net/abc123456
How can I do this?
In the place that you have hosted that domain, See if you can find something that makes it a single page app or a way to rewrite all urls to one page so that it doesn't show 404 not found. (not certain how you can do that, I only done it with firebase hosting, it has a way of configuring it so that no matter what url you give it, it always shows you the same page, and also the url doesn't get changed ) if you can do that, this is the code you need:
let pathname = location.pathname //if the url is https://example.net/1234, the path name will be /1234
location.href = "https://example.net" + pathname //if you add that to this string, it would be https://example.net/1234
You can use following code for that:
location.href = 'https://example.net/12345';
location.href = 'https://example.net/abc123456';
Or used following code for that:
location.replace('https://example.net/12345');
location.replace('https://example.net/abc123456');

Dynamically set href anchor tags not sending a get request

I'm not really sure where I"m screwing up with this. Basically I'm reading from my database to generate an html page and dynamically set the hrefs of some anchor tags. When I click on the links, however, the page just reloads and doesn't send a GET request to the server. The important part of the Jade rendering is here.
each val in tournaments
a(href="/home/tournaments/?_id=" + val._id)
The _id param is just the default _id MongoDB gives to the document upon creation.
I'm also using Express to handle my server side requests. The pertinent one for this is here:
app.route("/home/tournaments/:id")
.get(function(req, res, next) {
console.log("Request: " + req.query._id);
});
Nothing gets printed to the console when I click the anchor tag, so I guess it's not reaching this route for some reason.
Can anyone explain what I'm doing wrong and what I need to do to fix it?
Thanks in advance.
The problem is that you're placing the ID in the query string instead of the actual url path. So to make your existing route match, you'd need to instead do this:
each val in tournaments
a(href="/home/tournaments/" + val._id)
and then use req.params.id instead of req.query._id.
OR you could adjust your route pattern to just be /home/tournaments.

Same URL - render different pages (EXPRESS)

Is it possible to render different pages for the same URL in express?
For example, if I click on #login1, I want to be sent to /login_page/. If I click on #login2, I should still be sent to /login_page/. Each time, I want to render different htmls depending on which #login I clicked.
So I want it to look like this.
Client:
$("#login1").click(function(){
window.open(/login_page/,'_parent');
});
$("#login2").click(function(){
window.open(/login_page/,'_parent');
});
Server:
app.get('/login_page/', users.login_page1); //if I clicked #login1
app.get('/login_page/', users.login_page2); //if I clicked #login2
Thanks a lot for any help.
Basically you need some field in the request to convey this information.
The simple thing: the URL, as the web was designed
If you're too cool to have the URLs be different, you can use the query string
window.open('/login_page?from=login2', '_parent');
If you're too cool for the query string, you could set a cookie
If you're too cool for a cookie, you could request the page via ajax with xhr.setRequestHeader
If you're tool cool for a custom ajax request header, you could add an image with a tracking pixel src attribute to the DOM just prior to loading the login_page and detect that in the server side session and render a different page accordingly
So in summary there are at least a half-dozen ways to technically achieve this. Only the URL and the query string are reasonable, IMHO.
if I got it correctly you just want to invoke different controllers upon the same request with no parameters?
you know you can just parametrise the url and get the result you need with small control logic on the server side.
I don't believe it's possible to do this without any parameters. One solution could look like this
client:
$("#login1").click(function(){
window.open(/login_page/1,'_parent');
});
$("#login2").click(function(){
window.open(/login_page/2,'_parent');
});
Server:
app.get('/login_page/:id', function(req, res){ //if I clicked #login1
if(req.params.id == 1){
res.render('index1.html');
} else {
res.render('index2.html');
}
}

Specifying root url with param like :id in Backbone.js and ability to access it

Hi I want to make my root url have a :id segment like below which should be passed as param to every route that matches it
Backbone.history.start({ pushState: false, root: "/orders/:id/items"})
routes: {
"": "item"
},
item: function(id) {
alert(id);
}
but right now I am getting id as undefined, even though it is part of root url.
Please help me
Well, you can't have a parameter segment in your root url in Backbone.History.
Some source code from Backbone.History.getFragment that is used to get the url-fragment to match routes to and extract variables from (I laid it out a bit differently)
if (!fragment.indexOf(this.options.root)) {
fragment = fragment.substr(this.options.root.length);
}
This piece of code is where every single Router.navigate call ends up to (unless { trigger: false } is applied). So what happens that if the fragment contains your root url defined with the start-function, the fragment will be replaced with a substring of the original fragment that has the root conveniently left out. So your root url won't be even taken into consideration when the variables are picked away from the fragment.
so there is NO way to get variables into the root URL, because, by definition, the root url is just a pointer for Backbone.History in case your application is not served from the root url of your domain. Here's the quote:
If your application is not being served from the root url / of your domain, be sure to tell History where the root really is...
So if your application is not being served from /orders/12345/items and /orders/78342/items then I suggest that you don't try to tell your router that it is. Instead, serve it from / and then set up the routes normally:
routes: {
'orders/:id/items': 'item'
}
Hope this clears things up!

Where to "build" the content for a sidebar?

I'm currently creating my new website with express. The page is split up in different "sections" (for example a blog, information about my project and so on).
I'd like a have a "sidebare" next to my content thats different for each section. For example in the "blog"-Section id like to have a list of my tags or categorys and in the project section there should be a list of all projects. The content depends on the section and is the same for every "subpart" of this section.
One solution would be to create a function that creates the sidebars content and call this function in every function that handles a route. But I don't like this solution because it doesn't seems to "be the right one"...
Does anyone have a nice solution for this?
If I understand your question correctly, you want to know how to render multiple 'sections' using the same overall template, yes? Each section could differ depending on the content on the page and the main URL.
I can suggest two ways:
1) IMHO the right way - Define a base template (say index.jade if you're using jade/express) and you would create routes for say a homepage (/) and a blog page (/blog) using that:
# Home Page
app.get '/', (req, res) ->
# Do some simple DB transactions, etc, and get the main area content.
res.render 'index.jade', { json: json }
# Blog Page
app.get '/blog/:id', (req, res) ->
blog.grabPost req.params.id, (json) -> # Grab content of the blog post from the DB
res.render 'index.jade', { json: json }
Next, create a few 'partial' URL's for the remainder of the content:
# Sidebar Partial
app.get '/sidebar/:page/:id', (req, res) ->
sidebar.grabContent req.params.id, (json) ->
res.render '{#req.params.page}.jade', { json: json }
You would then call the partial client-side upon pageload via JQuery like so:
$ ->
$('.sidebar').load '/sidebar/blog/365' + id, (response, status, xhr) ->
2) Using Express 'view partials' which I'm much less familiar with. Documentation can be found here: http://expressjs.com/guide.html#view-partials
From the description: "The Express view system has built-in support for partials and collections, which are “mini” views representing a document fragment. For example rather than iterating in a view to display comments, we could use partial collection:"

Categories