fetching HTML with JS to replace part of the page - javascript

So I tried this answer to fetch an HTML document, but the issue I have is that I get the following: [object HTMLDocument].
What I want is to have the content of the HTMLDocument. Anyone knows how to do that?
Additionally, in my HTML module, do I need to create a new whole page like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
this is some html text that needs to be <em>emphasized</em>.
</body>
</html>
or can I simply put lines of HTML like this:
this is some html text that needs to be <em>emphasized</em>.

Related

How to create my own html tag and validate it

I want to create my own HTML tag because I am facing an issue in adding new div tag in TABS. I found the following method but it is not being validated showing the following error in w3 validate.
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
tab-content-body{
color: brown;
}
</style>
<tab-content-body class="d">Hello</tab-content-body>
<script>
class tabcontentbody extends HTMLElement{
constructor(){
super();
}
}
customElements.define('tab-content-body',tabcontentbody);
</script>
</body>
</html>
It's been a while since I've worked with html validation for real, but in short you would need to;
Create your own xml schema to validate your html against.
This is basically a mapping that will tell a validator how valid input should look like (i.e. is tab-content-body a valid tag? Can it have any child tags? If so, how many? Etc). More about it on https://www.w3schools.com/xml/schema_example.asp
Change the DocType of your html to point to that validation schema.
Your would need to change from <!DOCTYPE html> to something that points to the validation file and the content type (In the old days html 4.01 used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) More about this on https://www.w3schools.com/tags/tag_doctype.asp

Decode Encoded String

I have a box that looks like this 🟩. I am trying to put it into a string like this
var t = "🟩"
but whenever I try to do that, it automatically gets encoded into something that looks like this 🟩
Here is my code:
<div id="green" style="display: none;">🟩</div>
Should Be
<div id="green" style="display: none;">🟩</div>
How do I decode it? (This code is being uploaded to chrome://extensions if that helps. Thats why its changing I think)
Add <meta charset="UTF-8"> to the head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="green">🟩</div>
</body>
</html>
Also why have you set display to none?
The charset attribute specifies the character encoding for the HTML document.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
...
</body>
</html>

I'am getting "[violation] avoiding using document write()" error when adding a body tag in html

when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue

How to apply GString interpolation in a js file in Grails

My GSP file (in Grails 3.1.10):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</head>
<body>
<span id="greeting"></span>
</body>
</html>
myfile.js:
greeting = "${resp}"; // resp is passed from controller
$(document).ready(function(){
$('#greeting').val(greeting);
});
Well, I believe in that every grails developer knows if I move myfile.js into my GSP file, it will work.
However, I hope to know how to let the standalone js file can handle the inline variable of GString correctly.
Thanks.
Below is the approach I followed when ran into same problem like yours.
Pass your GString variable to external JS by following way.
Add the below function in your external JS
function view_handler_function(greetingValue){
//assign the value to your element
$('#greeting').val(greetingValue);
.....
//Your other handling code
}
Call your function from your view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</head>
<body>
<span id="greeting"></span>
<script>
var greeting = "${resp}"; // resp is passed from controller
$(document).ready(function(){
//call to your external function
view_handler_function(greeting);
});
</script>
</body>
</html>
Note: This may or may not be the exact answer you are looking for but just one way around I follow.
this is out of the box simply not possible, and it's not a good idea either (although of course you could use a controller action as javascript src and in that action read in the js file and run it's content through a e.g. simpleTemplateEngine)
having js files be interpreted like gstrings/other templates would mean that any caching (bundle files via asset pipeline, cdn distribution and browser caching) had to be disabled.
however, you can simply serve the js files statically and e.g. provide your dynamic input as global variables in inline javascript (e.g. from your layout):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="greeting"></span>
<g:javascript>
var greeting = "${resp}";
</g:javascript>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</body>
</html>

using preventDefault in onclick doesn't work

Can anyone tell me why the code below doesn't seem to prevent the link from doing its thing? I know I can just use onclick="return false", but it should work with preventDefault, right? I tried onclick="function(e){this.preventDefault()}" and onclick="this.preventDefault()", but no love.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
Google Search
</body>
</html>
Remove function(e){. When you put function(e){} there, that means creating a function but not running it.
Demo: http://jsfiddle.net/DerekL/RnngR/
Do it like this:
Google Search

Categories