code below.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['information technology'],
['web'],
['development']
]
);
var options = {
wordtree: {
format: 'implicit',
// word: ''
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
issue:
expected three items to be rendered, however, we now have four including an erroneous "technology" while view source indicates correct rendering.
tested browser; firefox and chrome.
Related
I'm trying to setup ember-testing with QUnit to test my Ember.js application.
My problem is the app isn't rendering on the QUnit test page, and thus the visit('/') function isn't working.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MKTS Tests</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./bower_components/qunit/qunit/qunit.css">
<!--
<link rel="stylesheet" href="./css/foundation.css">
<link rel="stylesheet" href="./css/app.css">
-->
<style type="text/css">
#qunit-fixture, #app-root {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- Libraries (Dependencies) -->
<script src="../app/bower_components/requirejs/require.js"></script>
<script src="../app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../app/bower_components/handlebars/handlebars.js"></script>
<script src="../app/bower_components/ember/ember.js"></script>
<script src="../app/bower_components/ember-data/ember-data.js"></script>
<!-- App and Templates -->
<script src="../app/scripts/app.js"></script>
<script src="../app/scripts/models/fleets.js"></script>
<script src="../app/scripts/routes/application_route.js"></script>
<script src="../app/scripts/routes/index_route.js"></script>
<script src="../app/scripts/router.js"></script>
<script src="../app/scripts/store.js"></script>
<!-- Test Helpers -->
<script src="./support/test_helper.js"></script>
<!-- Test Library -->
<script src="./bower_components/qunit/qunit/qunit.js"></script>
<script src="./spec/integration.js"></script>
<script src="./spec/unit.js"></script>
</body>
</html>
integration.js
test('hello world', function() {
//debugger;
//expect(1);
MarketSetupAdminUi.reset();
visit("/").then(function() {
var title = find('title');
equal(title.text(), 'Market Setup Tool', 'Title check');
});
});
test-helper.js
(function (host) {
var document = host.document;
var App = host.MarketSetupAdminUi;
var testing = function(){
var helper = {
container: function(){
return App.__container__;
},
controller: function( name ){
return helper.container().lookup('controller:' + name);
},
path: function(){
return helper.controller('application').get('currentPath');
}
};
return helper;
};
Ember.Test.registerHelper('path', function() {
return testing().path();
});
Ember.Test.registerHelper('getFoodController', function() {
return testing().controller('food');
});
// Move app to an element on the page so it can be seen while testing.
document.write('<div id="test-app-container"><div id="ember-testing"></div></div>');
App.rootElement = '#ember-testing';
App.setupForTesting();
App.injectTestHelpers();
function exists(selector) {
return !!find(selector).length;
}
}(window));
I updated the app to Ember 1.10.0 and Ember-data beta.15.
I'm planning to regenerate the app using Ember-CLI, which appears to have better testing.
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I am new at using Handlebars, and I have simple question. I am trying to create table that contains a title and a text field next to it. When I try to place the textfields in the table, the textfields is placed on top of the table instead.
This is the code that I am using:
<!DOCTYPE html>
<html>
<head>
<title>Handlebars.js example</title>
</head>
<body>
<div id="placeholder">This will get replaced by handlebars.js</div>
<script type="text/javascript" src="handlebars-v1.3.0.js"></script>
<script id="myTemplate" type="text/x-handlebars-template">
<table>
{{#each names}}
<tr><th>{{name}}</th><input type="text"></tr>
{{/each}}
</table>
</script>
<script type="text/javascript">
var source = document.getElementById("myTemplate").innerHTML;
var template = Handlebars.compile(source);
var data = {
names: [
{ name: "foo",id:'id'},
{ name: "bar",id:'id' },
{ name: "baz",id:'id' }
]};
document.getElementById("placeholder").innerHTML = template(data);
</script>
</body>
</html>
What I am doing wrong?
Your table structure is bad. You're missing a tbody and your input is in a row, but not in a th or td.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>list</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>var split="Grand Hotel,Promenade,Southend,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
</script>
<script>var split="Imperial Hotel,Main St,Dundee,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
<script>
$(document).ready(function () {
$('li').click(function () {
console.log($(this).text());
$('#hotel').val($(this).text());
});
}
);
</script>
<style>
.ui-menu { width: 250px; }
</style>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 250px; }
</style>
</head>
</body>
<body>
<div id="locationselect">
<ul>
<li>Grand Hotel,Promenade,Southend,Postcode</li>
<p>
<li>Imperial Hotel,Main St,Dundee,Postcode</li>
<p>
</ul>
</div>
<input type="text" id="split[0]"/>
<p>
<input type="text" id="split[1]"/>
<p>
<input type="text" id="split[2]"/>
<p>
<input type="text" id="split[3]"/>
<p>
</body>
</html>
I knew nothing about coding until I joined a coarse two weeks ago and have got a bit ahead of myself lol but i'm really enjoying the problem solving in working things out, i've got far too much time on my hands. I'm trying to work out a way of selecting and splitting a static list and then passing this into seperate textboxes. Any help would be very much appreciated, I have looked and as far as I can tell i'm the first to ask this specific question, woo hoo!!
<script>
$(document).ready(function () {
$('.selectableItem').click(function () {
//alert('txt=' + $(this).text());
var selected = $(this).text().split(",");
console.log(selected);
$('#location').val(selected[0]);
$('#location2').val(selected[1]);
$('#location3').val(selected[2]);
$('#location4').val(selected[3]);
});
}
);
</script>
I've tried xtk release 2 as well as built xtk.js from source and there seems to be an issue (that wasn't there in release 1) when xtk is used alongside jquery.
No matter what I do, I always get a
"Uncaught Error: Could not find the given container or it has an undefined size."
in the javascript console.
To reproduce the issue, I modified the sample html page on the xtk wiki, reported here for convenience:
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript">
var run = function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
};
</script>
<body onload="run()">
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
and changed it to
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
});
</script>
<body>
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
If you test this page (I tried Chrome and Firefox), you'll get the error reported above.
Any ideas on how to tackle this? I'm investigating...
I am glad it works now! You could check out the (unreleased) demo where we use JQuery as well:
http://demos.goxtk.com/evl/
Just for a test: are you sure it worked different with XTK r1? I don't think anything changed on that level..