In my entry.html I have 2 hyperlinks pointing to the same index.html file. Now, in index.html I need to find which link the user clicked to navigate to index html and do some operation based on the link.
entry.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo">This is it.</p>
<script>
// How to find the link clicked by user
</script>
</body>
</html>
You can make use of query params in the links and call location.search on the redirected page to detect which link was clicked.
Refer to the code modification to your original code-
entry.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo"></p>
<script>
let linkName=location.search;
document.getElementById('demo').innerHTML=linkName.split('=')[1].toUpperCase()+' was Clicked !!!';
</script>
</body>
</html>
Entry:
Link A
Link B
Index:
console.log(location.hash)
or
Entry:
Link A
Link B
Index:
console.log(location.search)
or clearer
const url = new URL(location.href)
console.log(url.searchParams.get("link"))
Related
I am using angular universal.
This is the main url : https://domain-name.com/articles/some-article-slug-here
When this url is opened then res.render('index') is called and it causes to render the index.html file as shown in the code below.
app.get('*', (req, res) => {
res.render('index', { req });
});
Content of index.html is shown below:
<!doctype html>
<html lang="en">
<head >
......some head data here.....
</head>
<body>
......some body data here......
</body>
</html>
I want that when url : https://domain-name.com/amp/articles/some-article-slug-here is opened then replace the whole content inside html tag with some another html as shown below:
<!doctype html>
<html amp lang="en">
<head >
......some another head data here.....
</head>
<body>
......some another body data here......
</body>
</html>
Use Angular routing, you are saying: "I need a SPA with Angular!"
https://angular.io/guide/router
Windows 10, Sublime Text Editor 3, Emmet.
My html file has UTF-8 encoding. I want to insert a smile in the text (I inserted the smile by Win + . keys pressing):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
p{A smile 😜}
</body>
</html>
After I wrote p{A smile 😜} text I pressed Tab key but the string wasn't transformed to html code. Hm... I pressed Tab key again and I got the expected result.
Ok... But now I will get the problem in Emmet. I added the text (ol):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
ol>li*5
</body>
</html>
Now, if I press the Tab key then I get the invalid result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
o<ol>
<li></li>
</ol>
</body>
</html>
Pay attention to o before <ol> tag. Also, li item is one, but I expected to get 5 li items... I have the problem for some smiles. For example, I get the problem for 😜 smile, but I haven't for ☠.
const a = '😜';
console.log(`a.length: ${a.length}`); // 2
const b = '☠';
console.log(`b.length: ${b.length}`); // 1
How can I fix it?
By default, Thymeleaf needs all the html files to be present in scr/main/java/resources/templates. In order not to create a mess in templates folder I need to create different subloders there. The problem is that html files placed there never get resolved. Example is below.
Structure:
IndexController:
#Controller
public class IndexController {
#GetMapping(value = "/")
public String index() {
return "index";
}
}
default template:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
</head>
<body>
<section id="site-content" layout:fragment="content"></section>
</body>
</html>
index:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8"/>
<title>Index</title>
</head>
<body>
<div layout:fragment="content">
<div>
This is index page
</div>
Page
</div>
</body>
</html>
page in the subfolder:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
<div layout:fragment="content">
This is a page in the subfolder
</div>
</body>
</html>
When I open index page and click the link to the page.html, I get this:
What I did wrong?
You have no controller mapping for /subfolder/page.html, this is not how Thymeleaf and Spring work.
You can't easily reference plain HTML files, as they aren't technically stored there. You have to reference an endpoint defined within Spring which will then select the HTML file to be rendered, like so:
#Controller
public class IndexController {
#GetMapping(value = "/subfolder/page")
public String index() {
return "subfolder/page";
}
}
and create your link like this:
Page
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am saving an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
my_str fills in the contents of the HTML page. Inside of my_str are list items that I want to indent. To do this I tried adding a CSS tag to the bottom to indent all li tags like:
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
li {
padding-left: 20px;
}
Unfortunately, the output is displayed on the page instead of adding to the bottom as a padding for li items:
li {
padding-left: 20px;
}
Just add a <style> tag:
File.open("features/output/all_test_breakdown.html", "w") { |file| file.write(
" <!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
<style>
li {
padding-left: 20px;
}</style>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
" )}
Ugh. Here's how to write this more idiomatically. Starting with this rewrite:
my_str = 'foo'
File.open("my_output.html", "w") do |file|
file.write(<<EOT)
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
end
I'd refine it further using:
my_str = 'foo'
File.write("my_output.html", <<EOT)
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
If sticking a "here-to" in the write method bugs you, you could do:
my_str = 'foo'
html = <<EOT
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
File.write("my_output.html", html)
Or:
my_str = 'foo'
html = "
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
"
File.write("my_output.html", html)
In any case:
File.new("features/output/my_output.html", "w")
File.open("features/output/my_output.html", "w") { |file| file.write(
...
is code smell. You don't need to use new to create a file stub then open it followed by a ios.write. Simply IO.write it.
If you're just learning Ruby, the difference between the two will seem hard to decipher, but the first is a writing to a file handle, AKA "ios" AKA "IO-stream". The second is a class method of "IO", AKA "IO.write", which handles the intermediate steps of opening the file, writing the content and closing it automatically.