I am trying to load templates from a file into an HTML file using a script tag. I want to use this as a template in UnderscoreJS - but I'm not able to load the file:
//main.js
this.template = _.template($("#add-question").html());
console.log("testing");
console.log(this.template({
question: "How are you doing?",
yesOrNo: true
}))
//console output:
testing Main.ts:37
Main.ts:38
//main html file:
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<script type="text/template" id="add-question" src="client/add-new-question.html"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
</html>
// client/add-new-question.html
<form id="testForm">
<span>"<% question %></span>
<input id="questionInput" type="text">
<span>"<% yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
Update:
Here's the updated HTML in in which I've tried loading the html though a script tag in the body. Still doesn't work. This is how its expected to be done when rendering the template with UnderscoreJS. I want to be able to load the template with requireJS but render it using the underscoreJS template function.
<body>
<script type="text/template" id="add-question">
<form id="testForm">
<span>"<%= question %></span>
<input id="questionInput" type="text">
<span>"<%= yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
You have to use <%= to output variables instead of <%.
It looks like you are using requirejs.
So you could also use the tpl extension and store your underscore template in .tpl files:
https://github.com/ZeeAgency/requirejs-tpl
define(['tpl!client/add-new-question.html'], function(tpl) {
console.log(tpl({
question: "How are you doing?",
yesOrNo: true
}));
});
Links:
How to use underscore.js as a template engine?
and underscore.js
Related
I want to use google translate for one of my web pages and it worked fine.
but i want to use it for a specific part of my web page for example a textarea.
how can do that?
is it possible or not ?
this is my code ....
<h1>My Web Page</h1>
<div id="google_translate_element"></div>
<form method="post">
<textarea placeholder="type something .... "></textarea>
</form>
and also javascript code here ...
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I have the following program for the jQuery Mask plugin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="./scripts/jquery.mask.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("999-99-9999");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" />
</body>
</html>
When I blank out the SSN text field and type in a test pattern such as
33y
33=
33(
33+
or
33G
the last character gets changed to a minus and
33--
becomes the output.
(Notice that there are two minuses in the final output)
Is there some way I can get the jQuery Mask plugin to stop changing the last character of my test patterns to "--"?
NOTES:
I'm using v1.7.7 of the jQuery Mask plugin found at https://plugins.jquery.com/mask/
Please abstain from lecturing on best security practices for processing PII and SSN data since I'm only using SSN as an example.
Try making your mask use # instead of 9
$("#ssnId").mask("###-##-####");
And also add maxlength to the input tag:
<input type="text" id="ssnId" name="ssn" maxlength="11" />
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin#1.14.16/dist/jquery.mask.min.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("###-##-####");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" maxlength="11" />
</body>
</html>
I want to inject javascript library inside head tag and my customized and my own code at body using GULP.
For Example:
<html>
<head>
<!-- injectJS -->
<script src="jquery.js">
<script src="d3.js">
<!-- injected -->
</head>
<body>
<!-- injectJS -->
<script src="index.js">
<!-- injected -->
</body>
</html>
I've been using gulp-template to do exactly this. Your index.html would then have to be adjusted. e.g.:
<% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>" inline></script>
<% }); %>
In this example your gulpfile task would look something like:
gulp.task('index', () =>
gulp.src('src/index.html')
.pipe(template({scripts: ['script.js', 'another-one.js']}))
.pipe(gulp.dest('dist'))
);
Another way to achieve this would be using gulp-inject. I prefer gulp-template though.
So I am trying to build the simplest Angular JS application and no idea what I am doing wrong.
It is made of 4 files:
index.html - which I use like a layout to display main.html
app1.js - used for defining simple routing rules like /main should redirect to main.html in combination with MainController; when it doesn't find a valid path, revert to a default which equals the previous path
MainController.js - I just have some timer functions here
main.html - displays a search button and search textbox
For some reason, I can't see mainvtemplate from my index.html which should redirect me to /main.
Here is the code:
index.html file
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
the app1.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
the main.html file:
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
You may ignore the countdown, this is a timer created in MainController.js. I render its simplified logic:
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
$scope.countdown = 5;
};
app.controller("MainController", MainController);
}());
Isn't weird I'm not able to see the search button and search textbox? Maybe I am missing sth really obvious here.
in your index.html
<script src="app.js"></script>
replace with
<script src="app1.js"></script>
main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.