I have an index.html where I have this code: I followed it from the documentation on handlebars site, but I am not able to make it work. When I pass a string to var source then it works fine, but when I try to get the template using $(#elem_id), handlebars does not insert the data in it.
<html>
<head>
<script src="../static/js/handlebars-1.0.0.beta.6.js"></script>
<script src="../static/jquery/1.7.1/jquery.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
$(document).ready(function() {
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var d = {"title": "My New Post", "body": "This is my first post!"};
var result = template(d);
console.log(result); //This just returns the template html, without the data
});
</script>
</body>
</html>
I assume this is caused by your HTML being in script tags. Try wrapping your Html inside an invisible div (or make the div itself invisible), i.e.:
<div style='display:none;' id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</div>
Related
I use Google Code Prettify to syntax highlight my code. This is my HTML
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
<div id ="xmlView">
<pre class="prettyprint">
<code class="language-xml" id="xmlTextArea"></code>
</pre>
</div>
</body>
When adding Code directly in HTML to xmlTextArea and replacing all < and > with > and < it does it's job, but not when setting the code with jquery like this:
$('#xmlTextArea').text(code)
I also tried to call PR.prettyPrint() afterwards
Here is the pretty code. You can refer to code-prettify for more examples:
var someCode = 'class Voila {public:static const string VOILA = "Voila";tags.}';
$('.prettyprint').html(someCode);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
<div id="xmlView">
<pre class="prettyprint"></pre>
</div>
</body>
I have a set of nested <div> and on completion of the page load need to take action on the inner <div> of each of the outer <div>
In the .ready() of the page, I iterate through each of the $('.outer').each() calling the doSomething() function, which then attempts to find() the <div class='inner'>.
The problem is that the .find() method is failing with
Object doesn't support property or method 'find'
Below is the view source (from IE11) to demonstrate the issue.
Markup
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="outer">
<div class="inner">
1
</div>
</div>
<div class="outer">
<div class="inner">
2
</div>
</div>
<div class="outer">
<div class="inner">
3
</div>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery.fittext.js"></script>
<script src="Scripts/jquery.cycle.lite.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/respond.js"></script>
<script src="Scripts/moment.js"></script>
<script type="text/javascript">
$(function () {
$(".outer").each(function () { doSomething(this); })
})
function doSomething(divO) {
debugger;
var divI = divO.find("inner");
console.log(divI);
}
</script>
When the debugger breaks, evaluating divO.tagName on IDE (Visual Studio) it says that it is in fact a Div tag
use:
var divI = $(divO).find(".inner");
I am using mustache.js to render template for 2 user data. Due to some error I am unable to get result, though for a single object I got results. Can someone help?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
loadUser();
});
});
</script>
</head>
<body>
<button>Click Me!</button>
<div id="target"></div>
<script>
function loadUser() {
var template = $('#template').html();
var jdata = [{name: "Luke", age:"43"},{name:"Lara",age:"19"}];
var rendered = Mustache.render(template, jdata);
$('#target').html(rendered);
}
</script>
<script id="template" type="x-tmpl-mustache">
<p>Hello {{ name }}! with age {{age}}</p>
</script>
</body>
</html>
You are getting this error because repeating expressions are missing in the mustache template. Use the code below instead for defining template.
<script id="template" type="x-tmpl-mustache">
{{#.}}<p>Hello {{name}}! with age {{age}}</p>{{/.}}
</script>
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO
What I am trying to accomplish is, using jQuery, dynamically replace the content (generated from another javascript) of div tag with id="Test".
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
$("#Test").html('<b>test content</b>');
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
As you can see,
$("#Test").html('<b>test content</b>');
replaces the html code of div tag with id="Test" with html code
<b>test content</b>
this works perfectly fine. I am getting rendered html as
begin
test content
end
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function TestScript(){
document.write('<b>test content</b>');
};
</script>
<script type="text/javascript">
$(function(){
$("#Test").html(TestScript());
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
Here,
$("#Test").html(TestScript());
replaces the html code of div tag with id="Test" with generated html from javascript
TestScript()
I am getting rendered html as
test content
It replaces the entire content of the html file. How to resolve this problem?
Kindly help.
Thanks,
John
Try this:
<script type="text/javascript">
function TestScript(){
return '<b>test content</b>';
};
</script>