I am using nexusUI for a project and would like to use templates but discovered that don't seem to be rendered. I suppose it is because of the missing canvas context but I am not quite sure how to go about it... Any pointers?
Here's the code that illustrates the issue:
<!-- This renders fine, as expected -->
<div> <canvas nx='button'></canvas> </div>
<!-- this is my rendering container -->
<div class="nxContainer"></div>
<!-- and a template that should contain a "dial" widget -->
<script type="text/html" id="test">
<div data-content="widget"> </div>
</script>
<!-- counter example to make sure that loadTemplate is actually working -->
<div class="Container"></div>
<script type="text/html" id="test2">
<div data-content="text"> </div>
</script>
$(function () {
var nxus = {
widget: "<canvas nx='dial'></canvas>",
text: "Boo!"
}
$(".nxContainer").loadTemplate("#test", nxus);
$(".Container").loadTemplate("#test2", nxus);
});
http://jsfiddle.net/745vhffb/4/
edit:
So after poking around some more and looking through the source code of the nexusUI library, it looks like I found a solution and I updated my fiddle, which is now at revision #9 (I exceeded my quota for posting links).
nx.elemTypeArr.push("myslide");
var mySlider = "myslide";
var x = new slider('myslide');
x.init();
So basically, it looks like I have to take care of registering the new widget with nx and instantiating it.
So here's a complete solution to my issue:
function instantiateWidget(container, template, widgetType, id, destination){
var sub = {
widget: "<canvas nx='" + widgetType + "' id='" + id + "'></canvas>"
}
$(container).loadTemplate(template, sub);
nx.elemTypeArr.push(id);
eval(id + " = new " + widgetType + "('" + id + "', " + destination + ");");
eval(id + ".init();");
}
and then
instantiateWidget("#nxContainer", "#test", "dial", "local");
and this will populate the container with the template:
<div id="nxContainer"></div>
<script type="text/html" id="test">
<div data-content-append="widget"> </div>
</script>
The nx widgets need to be instantiated in order to obtain their canvas context and only then they become available. There is probably a more elegant way of doing this but for now it will do for me.
Related
So i'm back here again trying to figure out how to use HTML correct and can't get it to work correctly after been trying many hours with this.
Anyways, i'm trying to make so the picture and youtube trailer should be shown in the HTML and what I search for is something like this.
Right now im searching to make something like the picture but to get picture to be shown and a player with the trailer
so basically I want it to look similar like picture number one and I have come so far:
<!DOCTYPE html>
<html>
<head>
<title>Movies</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function callAjax(input)
{
var url = "http://localhost:1337/search/" + input;
$.ajax({
type:'GET',
url: url,
success: function(data)
{
console.log('SUCCESS');
$('#title').html("Title: " + data.title);
$('#release').html("Release: " + data.release);
$('#vote').html("Vote: " + data.vote);
$('#overview').html("Overview: " + data.overview);
$('#poster').html("Poster: " + data.poster);
},
error: function(request, status, err)
{
console.log('ERROR');
}
});
}
$(document).ready(function(){
$('#get-json').on('click', function(e){
e.preventDefault();
var input = $('#data').val().trim();
callAjax(input);
});
});
</script>
<body>
<center>
<div>
<input type="text" id="data" name="data" size="15" maxlength="120" />
<button type="submit" value="search" id="get-json">Search</button>
</div>
</center>
<section>
<div id="json-output"></div>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<div id="poster" img src="data.poster" style="width:104px;height:142px;"></div>
</section>
</body>
</html>
Also forgot to say that i'm very new at this, never done HTML really before and been trying to figure out this for a while without a result :(
You need to create placeholders for your JSON elements. At first write without that JSON a sample of HTML page that will look like you want. That page should have elements (for example div) for title, release and so on. Those elements should have its class or ids to be addressed (as it is already with <div id="json-output">)
You do not have to stringify your JSON. It is better to work JSON, since you can address its elements. For example, to set value into specific placeholder element you can use:
$('#title').html(data.title);
$('#relese').html(data.release);
$('#vote').html(data.vote);
JSON.stringify will return the contents of a JSON object as a string. It will not parse your JSON object and return HTML.
You can create a simple list like this:
function(data){
var $list = $('<ul>');
$list.append('<li>Title: ' + data.title + '</li>');
$list.append('<li>Release: ' + data.release + '</li>');
$list.append('<li>Vote: ' + data.vote + '</li>');
$list.append('<li>Overview: ' + data.overview + '</li>');
$('#json-output').html($list);
}
I use the code below to load a page using YQL :
$(document).ready(function() {
var url = "http://www.google.com";
$.getJSON("http://query.yahooapis.com/v1/public/yql?" +
"q=select%20*%20from%20html%20where%20url%3D%22" +
encodeURIComponent(url) + "%22&format=xml'&callback=?",
function(data) {
$('#container').html(data.results);
alert('Finish');
$('#container2').text($('#container #hplogo').attr('alt'));
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="background-color:#eee;max-height:200px;overflow:scroll;background-color:#eee;">
All Page
</div>
<div id="container2">
Specific Content
</div>
You can see it loads Google website, but I don't know why it stops before executing Alert('Finish'); command. I want to extend my code to get the content of specific element inside the data.results after that.
Any help would be appreciated.
When using list.js and tabletop for a sortable table taken from a Gdoc, I get the error: "Uncaught TypeError: Cannot read property 'childNodes' of undefined" on the first line of list.js.
Because the website I work for can only have JS uploaded, I need to write all my html using js or jquery, so it's a bit wonky. I think the error is being thrown because of the order I have everything, but I have tried moving things around to no avail. Everything is working other than the sorting.
Thanks!
HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="list.js-master/dist/list.min.js"></script>
<script type="text/javascript" src="src/tabletop.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="tablesetter"></div>
</body>
<script type="text/javascript">
var url = 'url to gdoc here';
$(document).ready( function(){
Tabletop.init( {key: url, callback: showInfo, parseNumbers: true} )})
function showInfo(data, tabletop){
$("#tablesetter").append('<h2>Table Working</h2><table><thead><th class="sort" data-sort="university">University</th><th class="sort" data-sort="no">Billionaires</th><th class="sort" data-sort="no2">Billionaires Rank</th><th class="sort" data-sort="rank">U.S. News Rank</th></thead><tbody class="list"></tbody></table>');
$.each(tabletop.sheets("Sheet1").all(), function(i, cat){
var htmltable = $('<tr><td class="university">' + cat.university + '</td>');
htmltable.append('<td class="no">' + cat.numberofbillionaires + '</td>');
htmltable.append('<td class="no2">' + cat.rankedbybillionaires + '</td>');
htmltable.append('<td class="rank">' + cat.usnewsranking + '</td></tr>');
htmltable.appendTo("tbody");
})
}
</script>
<script type="text/javascript" src="options.js"></script>
</html>
JS file
var options = {
valueNames: [ 'university', 'no' , 'no2' , 'rank']
};
var userList = new List('tablesetter', options);
The problem
var userList = new List('tablesetter', options); should be executed when the dom has an element of the list class; since in the question's code the list class default to list" , so such element should be <tbody class="list"> that is going to be appended to the #tablesetter only when the showInfo function receive data from google.
The solution
We ensure that the var userList = new List('tablesetter', options) statement executes after ( ie: at the end ) of the showInfo function; in other words move var userList = new List('tablesetter', options); from options.js just before the closing right bracket of the showinfo function.
More details
in the question's code when list.js tries to init() the dom is:
and list.list is still undefined when list.js defines it's getItemSource() functions:
with the proposed fix, at the var userList = new List('tablesetter', options); the dom is like:
and when defines it's getItemSource() functions the list.list can use the tbody as aspected:
If you look at this post, I'm sure your just missing some of the minimum requirements for list.js to function properly. Try to dynamically add the input with id and class of "search" as well with your other classes. Let me know if this helps.
https://stackoverflow.com/a/23078200/4812515
I am creating a web application framework to be used by other groups in my department to standardize the UI of our web apps. It's written in javascript using HTML templating through underscore.js. In order for the app to be totally extensible however, I'd like them to be able to extend HTML templates as they see fit without modifying the source.
Source
templates.html
...
<script type="text/template" id="fooTemplate">
<div class="foo">
</div>
</script>
<script type="text/template" id="barTemplate">
<p>Bar!</p>
</script>
...
Implementation
newTemplates.html
...
<!-- Only overwrite foo, not bar !-->
<script type="text/template" id="fooTemplate">
<ul class="foo">
<li class="bar">Blah!</li>
</ul>
</script>
...
Is there a way to intuitively enable users to extend HTML templates without forcing them to overwrite the file and copy/paste the templates they're not modifying?
You're not going to be able to use id attributes to identify your templates without a bunch of server-side processing to take care of the uniqueness issues. But you can use classes to identify your templates.
If you mash all your template HTML files together in override order ("base" templates first, "subtemplates" after) and use class attributes to identify the templates:
<!-- templates.html -->
<script type="text/template" id="fooTemplate">
<div class="foo">
</div>
</script>
<script type="text/template" id="barTemplate">
<p>Bar!</p>
</script>
<!-- newTemplates.html -->
<script type="text/template" id="fooTemplate">
<ul class="foo">
<li class="bar">Blah!</li>
</ul>
</script>
Then you can use things like
var foo = _.template($('.fooTemplate:last').html());
var bar = _.template($('.barTemplate:last').html());
to access your templates.
Demo: http://jsfiddle.net/ambiguous/gYHkF/
You could also stick with ids and try to load templates from newTemplates.html first and fallback to templates.html if you don't find it. If you load the template files into two separate variables but don't insert them into the DOM:
var $base = $('stuff from templates.html');
var $subs = $('stuff from newTemplates.html');
Then add a simple function to look for templates in $subs before $base:
function tmpl(id) {
var $t = $subs.filter('#' + id);
if($t.length)
return _.template($t.html());
return _.template($base.filter('#' + id).html());
}
Then you could do this:
var foo = tmpl('fooTemplate');
var bar = tmpl('barTemplate');
and The Right Thing would happen.
Demo: http://jsfiddle.net/ambiguous/EhhsL/
This approach also makes it easy to cache the compiled templates and not only avoid double lookups but avoid compiling the same thing over and over again:
function tmpl(id) {
if(tmpl.cache.hasOwnProperty(id))
return tmpl.cache[id];
var $t = $subs.filter('#' + id);
if($t.length)
return tmpl.cache[id] = _.template($t.html());
return tmpl.cache[id] = _.template($base.filter('#' + id).html());
}
tmpl.cache = { };
Demo: http://jsfiddle.net/ambiguous/YpcJu/
Very frustrated here. Can't get this to work and don't know why.
I am trying to populate my div with a div from another html file. Here is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="text">
content goes here
</div>
<script type="text/javascript">
function whenButtonClicked() {
var book = document.getElementById("book").value; //this is working
var chapter = document.getElementById("chapter").value; //this is working
var filename = 'files/' + book + chapter + '.html'; //this is working
$('#text').load(filename #source); //this is NOT
}
</script>
Thanks for any help.
Adam
Edit: Here is a link to the actual file I am working on. There may be something wrong in it as well.
Use this code: $('#text').load(filename + " #source");.