I can't for the life of me figure out what I'm doing wrong.
This is my HTML/JS:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="handlebars-v1.1.2.js"></script>
<script>
$(document).ready(function(){
var jsonString = null;
$.getJSON("data.json", function(data) {
jsonString = data;
});
var source = $("#items").html();
var template = Handlebars.compile(source);
$("ul").append(template(jsonString));
});
</script>
</head>
<body>
<script id="items" type="text/x-handlebars-template">
<span>{{Title}} : {{CSCI}}</span>
</script>
<ul>
</ul>
</body>
</html>
And this is my data.json file:
{
"Title":"I am a thing",
"CSCI":" "
}
The only output I get is the ":" so it's doing something properly. The console shows nothing (as in completely empty so I assume there's no syntactical errors anywhere?).
I don't like posting questions like this as it's usually because of a small mistake on my part somewhere, but I know you guys love this stuff ;)
As getJSON is an async function call you need to compile Handlebars in success callback function
$(document).ready(function(){
var jsonString = null;
$.getJSON("data.json", function(data) {
jsonString = data;
var source = $("#items").html();
var template = Handlebars.compile(source);
$("ul").append(template(jsonString));
});
});
getJSON is async, and so
var source = $("#items").html();
var template = Handlebars.compile(source);
$("ul").append(template(jsonString));
should all be inside of the callback as well
Related
i'm new in PHP and JAVASCRIPT..
i need to do a little script who takes the data from data.php with
$.getJSON("data.php", function(json).. and push it into 2 arrays in the HTML file, to reuse them.
data.php produce this:
[[47,48,48,48,50,51,48,46,47,45,48,47],[25,23,22,21,19,21,24,25,27,29,31,28]]
at now i do this, but it doesn't run and i don't know how to do.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON("data.php", function(json) {
$row1[] = json[0];
$row2[]= json[1];
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
thanks to all guys ;)
Your assignment syntax is wrong. You can't put [] at the end of a variable in Javascript.
$(document).ready(function() {
$.getJSON("data.php", function(json) {
var row1 = json[0];
var row2 = json[1];
// put code that uses row1 and row2 here
});
});
I used to use mustache.js for my templates on a quickbase app, but recently decided to switch over to trying handlebars so that I could use the if/then of it for a more appealing template.
However I can not seem to get them to work like mustache did, the Get for my module.js shows in the console, but after that the page doesn't load like it's supposed to (it usually loads the template.html)
module.js
var dbidApplication = "dbidHere";
var dbidTable = "dbidtHere";
var apptoken = "apptokenhere";
$.ajaxSetup({
data: {
apptoken: apptoken
}
});
var promise1 = $.get(dbidApplication, {
a: "dbpage",
pagename: "template.html"
});
var promise2 = $.get(dbidTable, {
act: "API_GenResultsTable",
query: "{3.EX." + kRid + "}",
jsa: 1,
options: "num-1",
});
$.when(promise1, promise2).then(function(html, data) {
//do some stuff with all the data
var template = Handlebars.compile(html[0]);
console.log(html[0]);
console.log(data[0]);
console.log(qdb_data);
$(template(qdb_data)).appendTo("#external");
});
My template has the source for handlebars and the div with id external
template.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="external"></div>
</body>
</html>
I think you forgot to set qdb_data:
$.when(promise1, promise2).then(function(html, data) {
//do some stuff with all the data
var template = Handlebars.compile(html[0]);
var qdb_data = data[0];
console.log(html[0]);
console.log(data[0]);
console.log(qdb_data);
$(template(qdb_data)).appendTo("#external");
});
I'm reading this tutorial and I'm having some problems with the examples... I tried to run the examples in localhost but I'm encountering with some errors and really don't know what could it be. I should be getting the first post of WP, but instead of that I'm getting this error Uncaught ReferenceError: url is not defined. Any sugestions??? Thanks!
<!DOCTYPE HTML>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(url,target_div) {
var URL = url
jQuery.ajax({
url: URL,
dataType: 'json',
success: function(data) {
jQuery(target_div).html(data.post.content);
}
});
}
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
varurl = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
vartarget_div = "#contents";
readSinglePost(url, target_div);
});
</script>
</header>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
It looks like "varurl =" should have a space to be "var url =" and same with "vartarget_div =" should be "var target_div =" instead.
Change a code as var url not varurl and var target_div not 'vartarget_div'. Give space to keyword var and the variable.
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
var url = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
var target_div = "#contents";
readSinglePost(url, target_div);
});
This code is working on other test environment but not on mine.
Do you know why?
I am using Amazon EC2 and Cotendo CDN.
The result I am getting is a blank page.
Thanks in advance!
<html>
<head>
<title>Geo Test</title>
<script type='text/javascript' src='http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script>
$(document).ready( function() {
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){
console.log(data);
var c = data.countryCode;
if(c=="US" || c=="US" ){
document.getElementById('ddd').innerHTML = 'US'; } else {
document.getElementById('ddd').innerHTML = 'Not US';}
/*
this service needs ip
var ip = data.host;
alert(ip);
$.getJSON( "http://freegeoip.net/json/"+ip,
function(data){
console.log(data);
}
);*/
}
);
});?
</script>
</head>
<body>
<div id="ddd"></div>
</body>
</html>
Change this line:
$(document).ready( function() {
to that:
jQuery(document).ready( function($) {
It's necessary, because inside http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1 you've already got a call of jQuery.noConflict(); , so jQuery is not accessible by using the $
...and also remove the ? (see Pointy's comment above)
For jQuery template:
http://api.jquery.com/category/plugins/templates/
I want to be able to dynamically load the templates from a server, rather than predefining it on the page.
The demos I saw on the projects are using predefined templates. After some research I found out that it is possible.
I try doing this and it doesn't work:
<script src="child.html" type="text/x-jquery-tmpl"></script>
I tried doing this and it doesn't work:
$(function () {
$.get("child.html", function (data) {
//Add template
$.template("tmplChild", data);
});
//template binds before async call is done
$.tmpl("tmplChild").appendTo("body");
});
And finally, I have get it down to the following hack:
so.html (This is the main page):
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript" src="so.js"></script>
<script type="text/javascript">
$(function () {
initTemplates(templateReady);
});
function templateReady() {
$.tmpl("tmplChild").appendTo("body");
}
</script>
</body>
</html>
child.html (This is the child template)
<h1>Child Loaded</h1>
so.js (This is my hack for ajaxly loading the js templates)
function initTemplates(callback) {
var templateUrl = "child.html";
var templateName = "tmplChild";
initTemplate(templateUrl, templateName, callback);
}
function initTemplate(url, name, callback) {
var opts =
{
type: "GET",
url: url,
dataType: ($.browser.msie) ? "text" : "xml",
success: function (data) {
xmlCallback(data, name, callback);
},
error: function (x) {
xmlCallback(x.responseText, name, callback);
}
}
$.ajax(opts);
}
function xmlCallback(data, name, callback) {
if (typeof data != "string") {
if (window.ActiveXObject) {
var str = data.xml;
data = str;
}
// code for Mozilla, Firefox, Opera, etc.
else {
var str = (new XMLSerializer()).serializeToString(data);
data = str;
}
}
//only takes strings!
$.template(name, data);
callback();
}
And here's what I don't like about it.
This doesn't work on Chrome
It seems like a lot of code just to load some template
I lost the ability to use $(document).ready(). I must now put all my code in this templateReady() method to be "template safe".
Is there a way around this?
Thanks,
Chi
Just load the template body as simple text and forget about putting it in a dummy <script> block. You can use $.tmpl(body, params) to populate the template and turn it into a string for appending to the DOM.
The whole thing with "not really script" <script> blocks is just a convenience useful in some situations.
edit — example:
$.get("/some/url/for/a/template", function(templateBody) {
var expandedTemplate = $.tmpl(templateBody, { param1: 0, param2: "Hello World" });
});
If the goal is to fetch a unique template each time you get data via ajax, then you might try fetching the template at the same time and include it in your data, that is if you have the luxury of modifying the returned object (anonymous object in .Net). Then you can store the template anywhere you want and you only need 1 ajax call for both the data and the template.
Refer here:
https://www.npmjs.com/package/jlate
use CDN:
<script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/jlate#0.0.2/jlate/JLate.min.js"></script>
HTML Code:
<body>
<div>
<jlate id="my_temp" src="template/jlate_title.html" type="template">
Loading...
</jlate>
</div>
</body>
Javascript:
$$("#my_temp").jlate({ title: "sample title"});