Nested template issue - javascript

please check the below code what i have in my aspx page. Please help me in this.
I am trying to nesting one template into another but i am not getting proper output.
My output:
Application1
#childTemplate
My expected output:
Application1
Env1
Env2
$(document).ready(function()
{
var mydata:[{Application: "Application1",Environment[{Env:"Env1"},{Env:"Env2"}]}];
$("#parentTemplate").tmpl(mydata).append("#divEnvironment");
});
<script id="parentTemplate" type="text/x-jquery-tmpl">
<ul><li>${Application}</li></ul>
{{tmpl{$data} "#childTemplate"}}
</script>
<script id="childTemplate" type="text/x-jquery-tmpl">
{{each Environment}}
<p>${Env}</p>
{{/each}}
</script>
<div id="divEnvironment"></div>

Related

Handlebars not populating template

I have a handlebars template and I'm trying to use it, but when I do, I get all the tags but with no text. Here's my HTML:
<script src="../static/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script id="template" type="text/x-handlebars-template">
<li class="message">
<h6>{{username}}</h6>
<p>{{message}}</p>
<p>{{date}}</p>
</li>
</script>
And in main.js:
socket.on('message', data => {
console.log('message recieved')
console.log(data.channel)
console.log(document.querySelector("#active").innerHTML)
if (data.channel === document.querySelector("#active").innerHTML) {
console.log(data.sent_by)
console.log(data.message)
console.log(data.time)
var template = Handlebars.compile(document.querySelector('#template').innerHTML);
console.log(document.querySelector('#template').innerHTML)
const context = {'username' : data.sent_by,
'message' : data.message,
'date' : data.time,};
var html = template(context);
console.log(context)
console.log(html)
document.querySelector('#view-message').innerHTML += html
}
})
All log messages are being run so the socket is receiving data and the if condition is being triggered. I've used handlebars in a previous section of the same project and it worked fine there so I'm not sure why it's not working here. Thanks!
move your script <script src="../static/js/main.js"></script> all the way to the bottom

Link JavaScript object within HTML

How would I be able to pull the data from the JS script within my HTML? I am wanting to pull the "Title", "Description", and "Link" objects and display them within my HTML code.
Here is the code:
<div class="roadMap" id="roadMap"></div>
<script src="/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
<script src="/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
<script type="text/javascript" src="/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
<script type="text/javascript" src="/publiccdnlib/fetch/fetch.min.js"></script>
<script src="/publiccdnlib/slick/slick.min.js"></script>
<script src="/publiccdnlib/CommonJS/CommonJS.js"></script>
<script src="/publiccdnlib/knockout/knockout.js"></script>
<script src="/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
<script src="/publiccdnlib/toastr/toastr.min.js"></script>
<script src="/publiccdnlib/dialog/open-sp-dialog.js"></script>
<!--END Scripts for O365-->
<script>
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
});
$pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z) {
console.log(z);
var result = z.results.map(a => ({
Title: `${a.Title}`,
Description: `${a.Description}`,
Link: `${a.Link}`
}))
console.log(result);
document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)
})
</script>
<html lang="en">
<body>
<div>
/* Code goes here */
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I see you are using jQuery so I will answer relative to it.
Using jQuery you can put text wherever you want using the text method.
For example, if you want to put the Title data in your div you could do:
$("div").text(result.Title);
The code above will place result.Title in every div on the page (which you only have one of.).
There are so many jQuery methods you could use as-well, such as append, prepend, and html. Append will put the text after the existing content of an element. Prepend puts the text before existing content of an element. Html with replace the html inside of an element.
So if you wanted to construct the HTML elements then place them on the DOM (the web page) you could do:
$(document).ready(function(){
var head = '<h1>${result.Title}</h1>';
var desc = '<p>${result.Description}</p>';
var link = '<a src="${result.Link}">${result.Link}</a>';
$("div").html(head + desc + link);
});
To put your Title, Description, and Link on the DOM. Hope this help you, good luck!

Emailjs - emailjs-mime-parser Example

I'm trying to read MIME text with http://emailjs.org/ but I get the javascript error 'MimeParser is not defined'
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/vendor/emailjs/emailjs-mime-codec.js"></script>
<script src="js/vendor/emailjs/emailjs-addressparser.js"></script>
<script src="js/vendor/emailjs/emailjs-mime-parser.js"></script>
</head>
<body>
</body>
<script>
$(function(){
var p = new MimeParser();
});
</script>
The JavaScript files are loading properly.
What am I doing wrong? Thanks.
Try
var parser = new this['emailjs-mime-parser'];
You are missing one java script emailjs-stringencoding.js
Try to include in below order
emailjs-addressparser.js
emailjs-stringencoding.js
emailjs-mime-codec.js
emailjs-mime-parser.js
jquery.min.js
You can create an object using below syntax
var parser = new this['emailjs-mime-parser'];

connecting angularJS to plotly

So I want to use angularJS to get data from a server and plot the data using Plotly. I am running a server in the background. The HTML I am using is shown below. I think it is pretty straight forward.
<!DOCTYPE html>
<html>
<head>
<title>Testign Plotly</title>
<script type="text/javascript" src='plotly.min.js'></script>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript" src='angular.min.js'></script>
<script type="text/javascript" src='plotApp.js'></script>
</head>
<body ng-app='myApp'>
<div id="graph" style="width:600px;height:250px;"></div>
<script type="text/javascript" ng-controller='plotXY'>
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div ng-controller='plotXY'>{{data}}</div>
</body>
</html>
I have the angularJS script plotApp.js as shown below, also very simple ...
var app = angular.module('myApp', []);
app.controller('plotXY', function($scope, $http){
$scope.data = {};
$scope.refresh = function(){
$http.get('http://localhost:8080/data').success(function(data){
$scope.data = {};
for(k in data){$scope.data[k] = data[k].map(Number);}
$scope.data = [$scope.data];
});
};
$scope.refresh();
});
Now, The compiled HTML for this (saved from the browser) is shown below ...
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<title>Testign Plotly</title>
<script type="text/javascript" src="Testign%20Plotly_files/plotly.js"></script><style></style>
<script type="text/javascript" src="Testign%20Plotly_files/jquery.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/angular.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/plotApp.js"></script>
</head>
<body class="ng-scope" ng-app="myApp">
<div id="graph" style="width:600px;height:250px;"></div>
<script class="ng-scope" type="text/javascript" ng-controller="plotXY">
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div class="ng-scope ng-binding" ng-controller="plotXY">[{"y":[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13],"x":[-10,-9,-8,-7]}]</div>
</body></html>
As you can tell, the portion within the div gets updates with the right data. However, that within the script doesn't!
Just so you know, If I use the data variable (the one that is commented out), I am able to see the plot. So Plotly is working.
I want the client to pull data from the server and have plotly display it. I can do it if I create the entire page from the server and send it over. However, I think that this way is much better. However, for some reason, I dont seem to be able to connect the data source in Plotly, to that in angularJS. I would really appreciate some help ...
The Plotly-method of updating the data seems to be through Plotly.restyle():
var update = {x: [[0,1,2], y: [[5,2,4]]};
Plotly.restyle(graphDiv, update, 0);
Just make sure that you use double arrays when you want to update an array. Plotly supports updating multiple traces at once via arrays, so [[0,1,2],[1,3,4]] would update two traces

Handlebar custom helper stuck on "doesn't match each"

I want to make certain elements lowercase by using handlebars (I know it's possible with CSS, but you can't do that for classnames for example). Anyhow, I am getting this error:
Uncaught Error: toLowerCase doesn't match each
My code:
<script id="icon-template" type="text/x-handlebars-template">
{{#each results}}
<li>
<div class="content">
<i class="Icon icon-{{#toLowerCase contentType}}"></i>
</div>
</li>
{{/each}}
</script>
Custom helper:
<script type="text/javascript">
Handlebars.registerHelper("toLowerCase", function(input) {
var output = input.toLowerCase();
return output.replace(" ", "");
});
</script>
What am I doing wrong?
I figured it out. For anyone having the same problems:
<script type="text/javascript">
handlebars.registerHelper("toLowerCase", function(input) {
var output = input.toLowerCase();
return output.replace(" ", "");
});
</script>
Handlebars must have a lowercase letter (like this: handlebars) at first & no hashtag is needed when you are using a custom helper. So the custom helper is now toLowerCase instead of #toLowerCase
<script id="icon-template" type="text/x-handlebars-template">
{{#each results}}
<li>
<div class="content">
<i class="Icon icon-{{toLowerCase contentType}}"></i>
</div>
</li>
{{/each}}
</script>
If a handlebars helper name is all lowercase:
<script type="text/javascript">
handlebars.registerHelper("lower", function(input) {
var output = input.toLowerCase();
return output.replace(" ", "");
});
</script>
you will need to use the hash when invoking it:
<script id="icon-template" type="text/x-handlebars-template">
<i class="Icon icon-{{#lower contentType}}"></i>
</script>
If the helper uses a CamelCase name:
<script type="text/javascript">
handlebars.registerHelper("toLowerCase", function(input) {
var output = input.toLowerCase();
return output.replace(" ", "");
});
</script>
then you do not use the hash:
<script id="icon-template" type="text/x-handlebars-template">
<i class="Icon icon-{{toLowerCase contentType}}"></i>
</script>
It matters how you invoke the helper. If you use a hash(#) then it's considered a Block Helper and needs to be closed. Otherwise you'll get that parsing error.
{{#toLowerCase}}Some UPPERCASE text{{/toLowerCase}}
Obviously it also matters what the helper code does. The syntax above is correct but the code may not have the desired effect.

Categories

Resources