I am new to handlehars, and feel the basic tutorials are not very newbie friendly. I have to put pieces together and the following code seems not working. The html is generated correctly which means it does work but nothing shows up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test handlebars</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
</head>
<body>
<div class="container"></div>
<script>
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
console.log(html);
$(".container").innerHTML = html;
});
</script>
</body>
$(".container").innerHTML = html;
You're mixing vanilla JS and jQuery. Either set the HTML the vanilla way,
document.querySelector(".container").innerHTML = html;
or the jQuery way:
$(".container").html(html);
Related
I have a simple program and some data strings that I want to pass to HTML page that hosted locally, but I'm getting error: ReferenceError: document is not defined
There's my .js file index.js:
let some_string = "some data";
document.getElementById("dataButton").onclick = function(){
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
}
And there's my HTML test.html:
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="index.js"></script>
</body>
</html>
Many thanks if someone come up with idea what am I doing wrong!
Update your files to the following
let some_string = "some data";
const dataButton = document.getElementById("dataButton");
dataButton.addEventListener("click", () => {
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
});
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="./index.js"></script>
</body>
</html>
So, I'm trying to render a template from an external file, and when I render it, it "works," just that it sends the script, not the actual script contents to the target.
I tried using the jquery .html() function to grab the inside contents of the script, but all I get is "undefined"
This is the body content:
<div id="target"></div>
<script>
var context = {"name": "Test"};
$.get('template.handlebars', function (data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
$(document.body).append(html);
}, 'html')
</script>
What I get is this:
<div id="target"></div>
<script>blah blah blah</script>
<script type="text/x-handlebars-template" id="template">
<h1>Test</h1>
</script>
Instead of
<div id="target">
<h1>Test</h1>
</div>
In response to someone's question:
Doing "body" instead of document.body has the same effect. The contents of the template document are:
<script type="text/x-handlebars-template" id="template">
<h1>{{ name }}</h1>
</script>
In your scenario, you have the handlebars template in a separate file –– which is not a HTML file, so you should try removing the script tag. According to the handlebars docs, they want you to include the script tags for shielding from HTML parser, but in your case that should not be a problem.
Next your jQuery $(document.body).append(html); is selecting the document body and appending the resulting HTML snippet.
To achieve the:
<div id="target">
<h1>Test</h1>
</div>
you'll have to select the target div. Doing a $("#target").html(html); should solve that issue.
I've created a sample to simulate your scenario, hope this gives more insight.
HTML file contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
<div id="target"></div>
<script>
var context = { name: "Test" };
$.get(
"template.handlebars",
function(data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
// $(document.body).append(html);
$("#target").html(html);
},
"html"
);
</script>
</body>
</html>
Handlebars template file contents:
template.handlebars
<h1>{{ name }}</h1>
References
https://handlebarsjs.com/
I'm trying to create a very simple ng-href page in AngularJS but it is not working and I cannot understand why.
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function() {
this.base = 'www.google.com';
});
</script>
</body>
</html>
You should use $scope to bind something to DOM. If you want use something with this. you should do something like:
HTML
<body ng-controller="ngh as vm">
JS
var a = angular.module('href', [])
a.controller('ngh', function() {
var vm = this;
vm.base = 'www.google.com'; // or this.base
});
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function($scope) {
$scope.base = 'www.google.com';
});
</script>
</body>
</html>
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );