I am trying to create reusable components for the different webpages of my website. I started using handlebars.js and I have the code below right now, I am able to pass simple HTML code with it and display it on the webpage. But I would like to have a whole navbar component rendered instead, and preferably linked to from another html or handlebar file somehow. any ideas?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js"></script>
</head>
<body>
<script id="template" type="template/handlebars">
<h1> my website </h1>
{{>navigationBar}}
</script>
<script>
var partialSrc = "some link to navbar";
Handlebars.registerPartial("navigationBar",partialSrc);
var templateSrc = document.getElementById("template").innerHTML;
var template = Handlebars.compile(templateSrc);
document.body.innerHTML += template();
</script>
</body>
What do you think about writing the template as string in a variable in an external JS-file and load it separate?
template.js
var templateSrc = '<h1> my website </h1>\
{{>navigationBar}}';
index.html
<body>
<script src="template.js"></script>
<script type="text/javascript">
var partialSrc = "some link to navbar";
Handlebars.registerPartial("navigationBar",partialSrc);
let template = Handlebars.compile(templateSrc);
document.body.innerHTML += template();
</script>
</body>
This is a simplified presentation. Ofcourse you have to make sure, that template.js is loaded before compiling with handlebars.
How do I include a JavaScript file in another JavaScript file?
Related
I have JSON in my localStorage which I want to read in my angular index.html file and also I want to show this JSON when I see the View page source. Below code, I have tried.
Note: When I am seeing View page source then only Plain HTML is showing noting dynamic from localStorage.
<html>
<body>
<script type="text/javascript">
window.onload = function() {
alert(JSON.stringify(JSON.parse(localStorage.getItem('profileJson'))));
var data = JSON.stringify(JSON.parse(localStorage.getItem('profileJson')))
var nameFromJson = data.default.provider.name
document.getElementById("demo").innerHTML = nameFromJson;
}
</script>
<p id="demo"></p>
<app-root></app-root>
</body>
</html>
View page source only gets the raw HTML then displays it. Therefore, you wouldn't be able to access the local storage when you're getting that text out because it would require JavaScript to be run.
I'm trying to make a Javascript a key value object and use it as my Resources for localization
I have made this Jascsript code in a javascript file:
var Values = {
lbl_CustomerName:"Customer name: "
}
now need to use this object in my HTML file:
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
</head>
<body>
Values.lbl_CustomerName
</body>
</html>
but it's parsed as a plane text!
I need to call this Object and access the key to show it's value in my HTML file how to do this?
we can truly advice you to use a javascript framework like angular js that embed this kind of behavior inside the framework.
without javascript framework, you will need to modify the DOM by yourself to insert your expected value. If you want to do it in pure javascript function you can write a functio like :
function insertKey(elem,id) {
elem.innerHTML = Values[id];
}
In your case it will look like that :
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
<script type="text/javascript">
function insertKey(elem,id) {
elem.innerHTML = Values[id];
}
</script>
</head>
<body>
<div onload="insertKey(this,'lbl_CustomerName')"></div>
</body>
</html>
Whenever you want to parse a JavaScript code, you should wrap it inside a script tag.
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
</head>
<body>
<script> document.write(Values.lbl_CustomerName); </script>
</body>
</html>
Browsers have interpreters and virtual machines. Natively, they parse the codes as HTML. if you need to use other syntaxes like CSS and JavaScript, you should tell them hey browser, parse this section as a CSS, JavaScript.
That's why we need and tags
I got the answer, the Javascript file must return an object, so I can use it on my page as follows:
javascript:
function resourcesObject() {
return {
"customerName": "Customer name";
};
}
HTML
<script>
var resources=resourcesObject();
var customerName=resources["customerName"];
</script>
Good Day,
I am trying to create a handlebars demo using an external precompiled file. Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars Demo</title>
</head>
<body>
<h2>Hello Handlebars!</h2>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/handlebars/handlebars.min.js"></script>
<script src="js/first.js"></script>
<script src="js/finished/first.tpl.js"></script>
</body>
</html>
Here's my javascript:
$(function () {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
Here's my first.hbs
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
I compiled first.hbs this way:
handlebars templates/first.jbs -f finished/first.tpl.js
and my file structure (where my javascript libraries reside in components):
+ HandlebarsDemo
+ components
+ js
+ finished
+ first.tpl.js
+ templates
+ first.jbs
first.js
index.html
I looked at the following: Handlebars Pass a string or Handlebars AST to Handlebars compile
I understand that I need to have the Handlebars.compile() before theTemplateScript is loaded into the DOM, so I moved my javascript code to the bottom and am still getting this error.
Does anyone have any suggestions?
TIA,
coson
Please refer below simple html with angular js code
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}
</script>
</body>
</html>
it will be working fine when i open this html in browser. but i want to export this html content to pdf.
Reading the all the contenats of html and writing the content in pdf file but angular js code is not parsed in pdf.
//reading the html content
string contents = File.ReadAllText(path);
//writing the html content to pdf
File.WriteAllText(path, contents);
but the output in pdf like
Hello, {{name}}!
that means it is not parsed in pdf. how to resolve this.
Note : i don't want to use some external plugin to generate the pdf for angular js code. i need to do in simple read and write in C#.
The reason why you get that is because you are just reading the HTML response from the server, not the content that is actually generated after the Javascript on the page has been invoked.
You need to start up an instance of an actual browser that interprets the Javascript on the page, and then read the output from there. One API that you can try using is Selenium, I've used it from both Java and PHP applications but they also have a .NET client driver
I wanted to access a session variable in javascript in asp.net mvc application. I have found a way to do it in aspx view engine but not in razor.
Please tell me a way to access the session variables
You can do it this way for a String variable:
<script type="text/javascript">
var someSessionVariable = '#Session["SomeSessionVariable"]';
</script>
Or like this if it's numeric:
<script type="text/javascript">
var someSessionVariable = #Session["SomeSessionVariable"];
</script>
This is really not a very clean approach though, and requires inline JavaScript rather than using script files. Be careful not to get carried away with this.
I personally like the data attribute pattern.
In your Razor code:
<div id="myDiv" data-value="#Request.RequestContext.HttpContext.Session["someKey"]"></div>
In your javascript:
var value = $("#myDiv").data('value');
In my asp.net I am not getting the result by
<script type="text/javascript">
var someSessionVariable = '#Session["SomeSessionVariable"]';
</script>
But I get the answer by below code,
<script type="text/javascript">
var yourVariable = '<%= Session["SessionKey"] %>';
</script>
For google searchers,
In addition, If you want to access the session variable in external .js file you can simply do like this,
------ SOME HTML PAGE ------
//Scripts below Html page
<script>
//Variable you want to access
var mySessionVariable = '#Session["mySessionVariable"]';
</script>
// Load External Javascript file
<script src="~/scripts/MyScripts/NewFile.js"></script>
Inside NewFile.js
$(document).ready(function () {
alert(mySessionVariable);
});