Skip to content

Instantly share code, notes, and snippets.

@jbinto

jbinto/index.html

Created November 2, 2014 07:40
Show Gist options
  • Save jbinto/64a6b529b92b8cbe8a29 to your computer and use it in GitHub Desktop.
Save jbinto/64a6b529b92b8cbe8a29 to your computer and use it in GitHub Desktop.
Download ZIP
[add your bin description] // source http://jsbin.com/begojepigu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
select {
display: block;
}
option {
background: black;
}
</style>
</head>
<body>
<select id="routes">
<optgroup>
<option>[Select route]</option>
</optgroup>
</select>
<select id="branches">
<option>[Select branch]</option>
</select>
<select id="stops">
<option>[Select stop]</option>
</select>
<script id="jsbin-javascript">
$(function() {
console.log('ready');
// DOM
var $routes = $('#routes');
var $branches = $('#branches');
// Reddit "class"
var Reddit = function() {
var getPosts = function() {
return $.getJSON('http://www.reddit.com/r/toronto.json');
}
return {
getPosts: getPosts,
};
}
var TTC = function() {
var getRoutes = function() {
return $.getJSON('http://webservices.nextbus.com/service/publicJSONFeed?command=routeList&a=ttc');
}
var getBranches = function(route_tag) {
return $.getJSON('')
}
return {
getRoutes: getRoutes
};
}
// App "class"
var App = function() {
var populateRoutesDropdown = function(data) {
var routes = data.route; //TTC json specific
$routes.empty();
$.each(routes, function(index, value) {
var title = value.title;
var tag = value.tag;
var option = $('<option>').text(title).val(tag);
$routes.append(option);
});
}
var populateBranchesDropdown = function(text) {
var option = $('<option>').text(text).val(text);
$branches.empty().append(option);
}
var onRoutesChange = function(e) {
// get selected option: http://stackoverflow.com/a/12750327/19779
var optionSelected = $('option:selected', this);
var text = this.value;
console.log('text: ' + text);
populateBranchesDropdown(text);
}
return {
init: function() {
$routes.change(onRoutesChange);
var routes = TTC().getRoutes();
routes.done(function(data) {
populateRoutesDropdown(data);
});
}
};
}
App().init();
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<select id="routes">
<optgroup>
<option>[Select route]</option>
</optgroup>
</select>
<select id="branches">
<option>[Select branch]</option>
</select>
<select id="stops">
<option>[Select stop]</option>
</select>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">select {
display: block;
}
option {
background: black;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function() {
console.log('ready');
// DOM
var $routes = $('#routes');
var $branches = $('#branches');
// Reddit "class"
var Reddit = function() {
var getPosts = function() {
return $.getJSON('http://www.reddit.com/r/toronto.json');
}
return {
getPosts: getPosts,
};
}
var TTC = function() {
var getRoutes = function() {
return $.getJSON('http://webservices.nextbus.com/service/publicJSONFeed?command=routeList&a=ttc');
}
var getBranches = function(route_tag) {
return $.getJSON('')
}
return {
getRoutes: getRoutes
};
}
// App "class"
var App = function() {
var populateRoutesDropdown = function(data) {
var routes = data.route; //TTC json specific
$routes.empty();
$.each(routes, function(index, value) {
var title = value.title;
var tag = value.tag;
var option = $('<option>').text(title).val(tag);
$routes.append(option);
});
}
var populateBranchesDropdown = function(text) {
var option = $('<option>').text(text).val(text);
$branches.empty().append(option);
}
var onRoutesChange = function(e) {
// get selected option: http://stackoverflow.com/a/12750327/19779
var optionSelected = $('option:selected', this);
var text = this.value;
console.log('text: ' + text);
populateBranchesDropdown(text);
}
return {
init: function() {
$routes.change(onRoutesChange);
var routes = TTC().getRoutes();
routes.done(function(data) {
populateRoutesDropdown(data);
});
}
};
}
App().init();
});</script></body>
</html>
Raw
jsbin.begojepigu.css
select {
display: block;
}
option {
background: black;
}
Raw
jsbin.begojepigu.js
$(function() {
console.log('ready');
// DOM
var $routes = $('#routes');
var $branches = $('#branches');
// Reddit "class"
var Reddit = function() {
var getPosts = function() {
return $.getJSON('http://www.reddit.com/r/toronto.json');
}
return {
getPosts: getPosts,
};
}
var TTC = function() {
var getRoutes = function() {
return $.getJSON('http://webservices.nextbus.com/service/publicJSONFeed?command=routeList&a=ttc');
}
var getBranches = function(route_tag) {
return $.getJSON('')
}
return {
getRoutes: getRoutes
};
}
// App "class"
var App = function() {
var populateRoutesDropdown = function(data) {
var routes = data.route; //TTC json specific
$routes.empty();
$.each(routes, function(index, value) {
var title = value.title;
var tag = value.tag;
var option = $('<option>').text(title).val(tag);
$routes.append(option);
});
}
var populateBranchesDropdown = function(text) {
var option = $('<option>').text(text).val(text);
$branches.empty().append(option);
}
var onRoutesChange = function(e) {
// get selected option: http://stackoverflow.com/a/12750327/19779
var optionSelected = $('option:selected', this);
var text = this.value;
console.log('text: ' + text);
populateBranchesDropdown(text);
}
return {
init: function() {
$routes.change(onRoutesChange);
var routes = TTC().getRoutes();
routes.done(function(data) {
populateRoutesDropdown(data);
});
}
};
}
App().init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment