I have a big chunk of HTML which is a template for some data added using AJAX. I would like to store the chunk in a variable and then do replacements on tokens in it but I don't want to mess up the formatting of the html to get it into a javascript string. Is there a thing like the
<<END
command in perl which will read everything following into a string until it hits the end token?
No, unfortunately, there is no such construct in JavaScript.
You have a few different options, each with its own merits:
String concatenation :
var html = '<div id="something">' +
'<p>Lots of HTML</p>' +
'<p>Lots of HTML</p>' +
'<p>Lots of HTML</p>' +
'</div>';
Escaping the newline:
var html = '<div id="something">\
<p>Lots of HTML</p>\
<p>Lots of HTML</p>\
<p>Lots of HTML</p>\
</div>';
Array joining:
var html = [
'<div id="something">',
'<p>Lots of HTML</p>',
'<p>Lots of HTML</p>',
'<p>Lots of HTML</p>',
'</div>'
].join('');
Storing it in an arbitrary hidden element:
HTML:
<textarea id="template" style="display:none;">
<div id="something">
<p>Lots of HTML</p>
<p>Lots of HTML</p>
<p>Lots of HTML</p>
</div>
</textarea>
JavaScript:
var html = document.getElementById('template').value;
I prefer using <script type="text/html">s or HTML comments but <textarea>s seem to be quite popular.
Using a full-on templating engine such as:
http://embeddedjs.com/
http://jtemplates.tpython.com/
Also see: http://ejohn.org/blog/javascript-micro-templating/
Simply put: no.
Since you're already doing AJAX calls, why not also retrieve the template via AJAX too - probably the simplest way to get it into a JS variable.
The language itself doesn't provide anything for this. I have used EJS (Embedded Javascript Templates) to solve a similar problem in the past, though. It was easy to work with, and uses a programming model that should be familiar to most web programmers.
There's no such thing in vanilla JavaScript. And I don't believe there's an implementation of that statement in jQuery either.
But it should be easy to implement with a simple extension method on the String prototype.
Or you could just implement Jogn Resig's micro templating solution (he's the guy who created and maintains jQuery).
Related
I'm using like below code
$('#convert').click(function(){
var message = $('#textarea').val();
var converter = new Markdown.Converter();
var output = converter.makeHtml(message);
console.log(output);
$('#show').html(output);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<textarea rows="10" cols="20" id="textarea"></textarea><br>
<input type="button" name="" value="submit" id="convert">
<div id="show"></div>
But ~~satya~~ was not working
How to make strike through work.
Markdown does not include support for strike-through in its syntax. Some implementations have added support as a non-standard addon, but the syntax varies across those (few) implementations. Without checking their docs, I do not know if pagedown offers such support, but I would assume not. In fact that would be my assumption for any Markdown implementation.
That said, the rules state:
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. ...
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
Therefore, the following Markdown:
<del>satya</del>
will result in the following rendered document:
satya
I am trying to improve an old website which has been created by having one index.php
Which is behaving like a parent to several sub sites which then
insert their specific contents into the parent using javascript (getElement, add all sorts of content and then appendChild).
This results in a huge code to just create a little form, which can be done far neater with HTML.
Thus my question;
how can I input HTML content into a parent file's elements without creating these contents all with javascript?
I am looking for a solution like:
<?php
include_once('index.php');
?>
<ul id="nav">
<li class="navi">Log uit</li>
</ul>
<script>
somehow insert newly created unsorted list "nav" into the included index.php
</script>
I hope I have formulated my question clearly and am looking forward to your answers!
I thing best to use angularJs for this.
I have found what I was looking for, it was innerHTML
This way I can simply type an HTML code inside javascript which is then inputted into the included php as I wanted.
Example;
document.getElementById('databox').innerHTML =
'<div class = "selectform">' +
'<form id="login" method="post" action="requestklant.php">' +
'<select name="klantdropdown"></select>' +
'<button type="submit">Opvragen</button>'+
'</form>' +
'</div>';
Thank you for your suggestions and effort, though.
This is a very short example, but I was wondering if there is a way of using an xml or html file with html markup instead of including it in the javascript like I do below.
I know there are template libraries out there, but I really just want to do something simple and not involve any libraries other than jQuery.
var description = this.name;
if description == 'full') {
return "<div><textarea cols='50' rows='50'>" + this.value + "</textarea></div>";
} else {
return "<div><textarea cols='50' rows='15'>" + this.value + "</textarea></div>";
};
Thanks
In general, without a template engine you have three options:
a) Adding the template directly into your markup as script tag
<script type="text/template" data-template="stats">
<div id="content">
...
</div>
</script>
The html code inside the script tag could be accessed with the following code:
$("script[data-template=" + templateName + "]").html()
The big benefit of this approach is that you are not making another http request.
b) Putting the template in external file and load it via ajax.
$.ajax({
url: "test.html"
}).done(function(html) {
...
});
c) Doing the things like you already did.
If you use AJAX to call a file, you can use the result of the file, which could be XML or nested HTML, etc etc.
I define a hidden div on my markup - then give it a generic ID, then in javascript I use the jQuery.clone() method to make a clone of that markup, and in the markup I define the template macro values that can then be injected with the real data using .replace..
HTML:
<div id="mytemplate">
Name: {0}
</div>
JS/jQuery:
var clone = $('#mytemplate').clone();
Then perform the replacements on the clone object and simply append to the DOM where desired!
I use CKEditor in my AngularJS Application. When I try to display the text that I saved from the TextEditor, it doesn't take the style. For Example if I want to display a sentence it appears as:
<p>How old are you</p>
instead of :
How old are you
I tried using ng-bind:
<div ng-bind="Item.Header"></div>
and the regular binding method:
<h3>{{Item.Header}}</h3>
But both methods didn't work. Is there a solution for this issue?
You should use "ngBindHtmlUnsafe". Since this command doesn't sanitize the expression, but you should only use it if you trust the source.
So the html will be written as follows:
<div ng-bind-html-unsafe="Item.Header"></div>
I wrote an ajax program.when i am getting response, at that time i will display
that content in my web page using html tags.
So how can I use html tags in javascript?
A sample data you get from server, and a sample html you want to add would make it easier for people to help you.
The basic steps are
1.Get a reference to the html node you want to put the new data in. There are multiple strategies to get reference to the node. If it has an id, it's most starightforward.
2.set innerHTML property.
eg
var node = document.getElementById("targetNode");
node.innerHTML = "<div>data</div>";
Well... Not much detail so not much of an answer...
Easy way
document.write("<body> <div> this is on my page! </div> </body>
or you can edit the innerhtml of an element to place things inside it
document.getElementById("id").innerHTML = "<div>This is inside my element with id="id" </div>"
Answers the question, no?
Instead of embedding html into javascript, you could make a bunch of predefined javascript functions and then use them outside of the script tags. For example, here's how to display a picture while still using the javascript functions.
<html>
<script type="text/javascript">
function display_message()
{
alert("This is a message.");
};
</script>
<body>
<img src="image.jpg">
<form>
<input type="button" value="Click me!" onclick="display_message()" />
</form>
</body>
</html>
I know this is an old post, but this could be helpful...
Using jquery is great way to combine html elements with script
Note: This would be used in the body, if using it in the be sure to enclose it in
$(document).ready (function(){ YOUR CODE });
// Create an object:
var url = {
link: "https://stackoverflow.com/questions/2834929/how-can-i-use-html-tags-in-javascript"
};
// Display URL object:
$('#panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//Note: the # denotes id, if you want to use a class it would be:
//$('.panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//your html would be: <div id="panel"></div> or whatever you choose ie <p> and so //forth