I have some HTML templates inside of jQuery code, I use them for generating some new elements with JS. Currently, I keep them in the bottom of my page as
<script type="text/html" id="ID_to_refer_from_jQuery">...HTML code here...</script>
I feel it's not the best way to do this, because some of them are pretty big, is there a way to store string HTML templates outside of HTML file?
Put them in another folder and call them in with AJAX. You don't want to have one huge file. Rather, leverage the organizational folder system to keep your project organized.
Example Folder Structure
/root
index.html
/templates
navigation.html
footer.html
...
Loading Them In
$("header").load("templates/navigation.html");
The best way to do this is to use the HTML5 template feature, but unfortunately it is not supported by Internet Explorer 10 or 11. Here is an example of it in use though:
<template id="simple">
<style>
span { color: purple; }
</style>
<img src="http://placehold.it/50x50" />
<span>Hello World!</span>
<script>
function boom(){
alert("BOOM!");
}
boom();
</script>
</template>
function addSimple(){
// Grab our template
var t = document.querySelector('template#simple').content;
// Optional -- Modify template
// Clone and add
var clone = document.importNode(t, true);
document.getElementById("simple-target").appendChild(clone);
}
(Source of this example)
In the mean time the most common way I've seen is to put your HTML in a JavaScript variable like this:
var html = [
'<div>',
' <h1>Example Domain</h1>',
' <p>This domain is established to be used for illustrative examples in documents. You may use this',
' domain in examples without prior coordination or asking for permission.</p>',
' <p>More information...</p>',
'</div>'
].join('');
If you have a chunk of HTML, there is even an online tool that will format it as a JavaScript variable automatically.
Related
That title might be a little confusing but I don't know how to put it otherwise. I have some JSON encoded data in a .json-file:
{"foo":"bar", "bar":"foo", "far":"boo"}
and some HTML content in a .html-file:
<h1>I'm a Title</h1>
<p>Lorem Ipsum</p>
<br>
<img src="./media/foo.png">
There is a jQuery script that takes the data from both files ($.getJSON() and $(#div).load()) and creates a page with some predefined head, uses the html as content and the json data to create some buttons (key=destination & value=name) on there.
Because the project has many of these pages I would love to have only one file that holds both my HTML content AND the JSON data so I had all I needed for one page would be a single file access. So the question really is: How can I store both JSON and HTML data in one file so jQuery can access, distinguish and process it?
This is part of an electron application but I'm not sure if that even matters for that question.
The content of the json file assuming it is a json object can be assigned to a javascript variable in the html document in a script tag.
Then to refer to, for example foo, you use theJsonObject.foo;
With the following javascript snipet you can see inthe browser's console the name of each property an the value.
How you mix this in your current code depends on how you are writting it. But make sure the variable is declared before you use it.
for (let prop in theJsonObject) {
console.log( prop + ": " + theJsonObject[prop] );
};
<html>
<head>
....
<script>
var theJsonObject = {"foo":"bar", "bar":"foo", "far":"boo"};
</script>
</head>
<body>
....
</body>
</html>
I have seen html templates created using any of the following tags
<textarea>
<script>
<div>
Which one is better and why?
Which of the following way of creating html templates is better and y?
CSS:
.template {
display: none;
}
textarea :
<textarea class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</textarea>
script :
<script type="text/html" id="tmpl1">
<div>adfsdfsdfs</div>
</script>
div :
<div class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</div>
I had faced problem with script tag here
i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub
http://mustache.github.com/
definitely my favorite way to do html templating
They are all poor choices.
textarea is designed to accept user input
div elements are designed to present content to the user
script elements are designed to hold programs
If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.
Alternatively, store the template in a data-* attribute on an appropriate element.
I want to embed my gists (gist.github) in my blogger blog. But as explained in this question dynamic views directly don't support javascript.
From the moski's(as mentioned in the answer) blog its possible to embed a gist.
What if I want to only embed only one file of my gist?
For example:
<script src="https://gist.github.com/3975635.js?file=regcomp.c"></script>
Looking at moski's blog, his description and gist snippets (gistLoader.js and gistBlogger.js), I can suppose that to reach your goal you have to edit that code a little bit.
Currently, when you add
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
at the bottom of your posts, what this script does is looking for this other code you added into your blog
<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
retrieves the data-id attribute, and injects the required code to load the script with src set to
'https://gist.github.com/' + id + '.js'
Now, if I correctly figured out what the code does, editing the second moski's HTML code in this way:
<div class="gistLoad" data-id="GistID" data-file="GistFile" id="gist-GistID">Loading ....</div>
and the function in moski's gistBlogger.js in order to retrieve (when defined) the new data-file attribute, you can generate a new src to inject, like that:
'https://gist.github.com/' + id + '.js?file=' + file
It should works.
Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development.
The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.
Screenshot:
Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?
If you are using PHP, you can fool Eclipse by adding empty php tag:
<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
<article>
<h1>
...
</h1>
</article>
</script>
You would have to find a plug-in which supports that template engine. The HTML Editor provided by Eclipse uses the value of the type/language attributes to find the classes that provide syntax coloring, content assist, etc. The possibility is there, but out of the box, it only provides for JavaScript.
If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.
First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:
<div class="tmpl_handlebars" id="tmpl_places">
<article>
<h1>Hello, World!</h1>
<p>This is a template...</p>
</article>
</div>
Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script.
With jQuery you just have to add this small script in your html head.
$(function() {
$(".tmpl_handlebars").each(function() {
var $this = $(this);
var children = $this.children().detach();
var id = $this.attr("id");
$this.replaceWith(
$('<script type="tmpl_handlebars"/>')
.attr("id", id)
.append(children);
);
});
});
This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.
Before the last }); in the code the divs processing, add the following lines to add your scripts:
$("head").append('<script type="text/javascript"'
+ 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...
Similar to #Neparkiraj's answer.
If you are using Django, you can add an empty tag to (I believe) "trick" Eclipse into just thinking the line is just "bad" html. Subsequent lines will then be highlighted with html syntax:
<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
As the tag is empty, <script type="tmpl_handlebars" id="tmpl_places"> will be perfectly rendered in the final document. Note that, using Django also likely means this code sits in a {% verbatim %} block, so you can combine this code to get:
<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
{% endverbatim %}
All of this is kind of ugly, but leads to both correct HTML highlighting in eclipse and correct rendering in the document.
I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );