Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm searching for a simple, small templating engine which usage would be similar to this:
<html>
<head>
<script src="templating.js"></script>
<script>
var data = {
person: {
name: "John",
age: 28
}
};
templating(data);
</script>
<title>Site</title>
</head>
<body>
My name is {{person.name}} and I'm {{person.age}} years old.
</body>
</html>
What should result in a page rendering:
My name is John and I'm 28 years old.
I've looked over every single templating engine found here: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more and it I dind't find one which would work like that.
So the question is: am I missing something here, or is this kind of templating not a good practice for some reason?
Take a look at https://angularjs.org/
It uses a very similar syntax to what you provided
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
And has some extra features regarding templating you might find useful.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I want to click on the first href element by javascript. But I have no idea how to reach website.com webpage with DOM. Can you tell me pls?
<!DOCTYPE html>
<html>
<body>
<td>hello</td>
<td>hi</td>
<script src=""></script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<td><a id="yourid" href="https://website.com" tabindex="-1">hello</a></td>
<td>hi</td>
<script>
function myFunction() {
document.getElementById("yourid").click();
}
</script>
</body>
</html>
give the first href an id and then paste this code in your script tag:
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a json file which shows a number say "12925.09".
How can I show this number on my HTML page?
<html>
<title>HTML Tutorial</title>
<body>
Number =
</body>
</html>
Thanks
Here's one way. Run the script below, comments are within the code.
//Your possible (simple) json data
var numbers = {"number":10}
//Get number div by its id
var numberDiv = document.getElementById("numberDiv");
//Target number divs innerHTML and set it to the number value (10) in your numbers object
numberDiv.innerHTML = numbers.number;
<html>
<title>HTML Tutorial</title>
<body>
<div id="numberDiv"></div>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I tried using alert() and confirm() in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
My Website
</title>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<h2 align=center>My Website</h2>
<p align=center> <button onclick=“myFunction()”>click to enter</button> </p>
<script type=text/javascript>
function myFunction() {
alert(“u sure?”);
}
</script>
</body>
</html>
Before you point it out, no, quotation marks glitch everything out on my website.
I tried something similar to this on another computer and it worked.
Is it just my computer?
The problem is likely with your double quotes. “ should be ":
function myFunction() {
alert("u sure?");
}
<p align=center> <button onclick="myFunction()">click to enter</button> </p>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a html page with a button whos onclick calls a javascript function...but I have been getting a function not defined error for two days! Can someone help?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="css/jqm-docs.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.2.1.js"></script>
<script>
function doSomething(){
alert('this is a test');
}
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="content" id = "test" data-theme="c">
$confirm
Cancel
</div>
</div>
</body>
</html>
This might be handy:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
You need to stick your scripts within the page element:
<div data-role="page">
<script>
function doSomething(){
alert('this is a test');
}
</script>
<!-- the rest of your stuff -->
</div>
In fact i have passed personally with this error even with valide HTML all what you need to do is move all of your functions to the head element.
Here is a fiddle:
http://jsfiddle.net/WekEA/1/
To demonstate what i have said in the framework & change the NoWrapToHead to onload