JSF 2.2: catch click on link of dynamically included html file - html

I my JSF view I display a list of links. When the user clicks on the list of links, two HTML files are loaded into a ui:include element from the folder on the server that the clicked link points to.
E.g. clicking the link:
http://localhost:7474/project/folder1
Loads the menu.html file from that folder into a ui:insert element as well as a file called cov.html into another ui:insert.
The menu.html looks like this:
<ul id="menu" xmlns="http://www.w3.org/1999/xhtml" >
<li class="menulink">
ONE
<ul>
<li class="menulink">
TWO
<ul>
<li class="menulink">
THREE
</li>
</ul>
</li>
</ul>
</li>
</ul>
Clicking on the link ONE should load the file
http://localhost:7474/project/folder1/files/one.html
into the ui:insert where previously the file cov.html had been loaded into (thus, replace the cov.html file).
So any file pointed to by one of those links in the menu.html should be loaded into the ui:insert.
When I click on one of the links now, it looks for the file:
http://localhost:7474/project/files/one.html
How can I get the value of the link that was clicked in my backing bean and load the correct file into the ui:insert?
Not an option for me would be to put the name of the folder into the link of the menu.html file, e.g. I cannot do this:
ONE
because the files get uploaded by users in a zip folder and I want them to be able to name that folder anything they like. So I cannot hardcord that folder name in the menu.html.
Do the a elements need to have an attribute that the backing bean can access or could I somehow incerpect the requestes URL and correct it?
What would be the best way to handle this?

Related

HTML a link not working when linked to other pages on site

So i have a simple nav bar that links to other pages on the website.
<ul class="navbar__list">
<li class="navbar__item">About</li>
<li class="navbar__item">Offerings</li>
<li class="navbar__item">Testimonials</li>
<li class="navbar__item">Contact</li>
<div class="navbar__contact">
Book a session
</div>
</ul>
Which all link to html files that also exist in the root directory (the same directory). Every time i try to use the link i am getting a response that says "Cannot GET /???" with ??? being the name of the html file i am trying to access.
I have played around with the paths, tried typing the name of the file explicitly, and have found that links to external sites work just fine, it's just internal pages that are causing problems.
The pages that i'm linking to do have content in them.
I'm hosting this locally using npm live-server, i'm not too experienced in it though and do wonder if there needs to be more configuration if i'm to use it to locally host several pages?
Thanks in advance
you need to write the full path to the file, not just its name
you missed .html after file name
If it is in the same directory, then write
href="about.html"

Setting a button in html

How do I set up a link button in html?
I want to set a button from the homepage so that user may be viewed by a log in screen. I have two index.html files, one for the homepage, and one for the login screen. How do I set it so when users click on log in they will be presented with the login screen.
I tried <li>Sign Up/lOG IN</li>.
My goal was to use href= location of index.html.
When I click the link it takes me to an error page. The top link would be the address to the index file that has the login html.
You don't have .html on your url. Try:
<li>Sign Up/lOG IN</li>
Also, you are using a relative link, so the position of the file where you have this link is important. Right now it will look one directory up for a file named index.html. If the file with the link is foo.html make sure in the same folder you have a folder named login that has a file named index.html.

HTML Local File area

I'm creating a series of web pages and I want them all to be linked together from a navigation bar, I currently have:
<li>XHTML & HTML</li>
However, if I need to export these files to another computer wouldn't the link be wrong and then not work?
How would I change these links so the file containing the HTML, CSS can be zipped up emailed to someone and it still work for them?
Use relative URLs.
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Something</li>
The path is relative to the current file, home.html, about.html, and contact.html are all in the same folder, while page.html is in a subfolder named 'folder'.
Just use relative links - no need to include the file:///...... This will also mean if you upload it to the web or zip all the files together and send to someone else, it will still work - assuming of course you maintain the same folder structure and relative file locations.
For example I have a root folder with my index.html file which has the navigation links and a folder structure as below with firstpost.html and secondpost.html in the blog folder.
Web Project folder structure
index.html
Creation.html
blog/ (folder)
firstpost.html
secondpost.html
example links in index.html
<ul>
<li>
XHTML & HTML
</li>
<li>
First Post
</li>
<li>
Second Post
</li>
</ul>
check out this post that will give you a basic overview of the idea of absolute vs relative paths.

referencing a jsp from another

I am working with Java servlets, and I am new to it.
I was trying to write a jsp page wherein I will have a menu ( a list of links ).
In index.jsp I have the following code:
<ul>
<li> <a href="http://www.google.co.za">Home<a/> </li>
<li> <a href="login.jsp">login here<a/> </li>
</ul>
but when I click on the first link it works, but crushed when I click on the second link. login.jsp exists within the same dir as 'index.jsp'
how can I get login.jsp to work as well?
Put your login.jsp in /WEB-INF folder and then try.Do not put it under anything else
I managed to solve it. My JSP files were within WEB-INF. Just found out that what is in `WEB-INF is private and cannot be accessed dirrectly. So I put them on the root folder of the project ( in parallel to WEB-INF )

Including an image in a list

I'm struggling to get an image in a list. When I do the following:
<ul>
<li><img src="image.jpg"></li>
</ul>
An image icon appears (like an error) and the image doesn't show. Is there anyway to display the image?
When using <img src="..."/> you can choose two path types.
Local Filesystem
You can select an image to use from the local filesystem. Can be either definite path (C:/Users/...) or relative to the current folder.
In your example, you are looking for a file named image.jpg in the current folder which most likely does not exist.
Please note that the file location must be relative to the location of the HTML file.
Remote Image Location
You can insert a link to a remotely hosted image, something like http://your-favorite-image-hosting.com/someimage.jpg.
It should work. Like what other people have been saying, double check your URL.
Here's an example that works:
<ul>
<li><img src="http://images.clipartpanda.com/smiley-face-clip-art-niXoRMbiB.png"></li>
<li>Second item in list</li>
<li>Third item in list</li>
</ul>
Your code (as it is now) is looking for image.jpg in the CURRENT folder (meaning the same folder where the page of your code is).
It seems that your image must be in a different folder as the page of your code.
As a test, leave your code as is and make sure the image.jpg is in the same folder as the page of your code (if not, place it there). If you still can't see your image then the name or your image might be wrong (check again the name and extension of your image file).