Skip to content

Instantly share code, notes, and snippets.

@jlord
Created October 6, 2012 21:37
Show Gist options
  • Save jlord/3846227 to your computer and use it in GitHub Desktop.
Save jlord/3846227 to your computer and use it in GitHub Desktop.
trying to have two instances of tabletop work

this is just the relevant parts of what i have set up.

i have two spreadsheets - i want to use tabletop and then:

  • have one spreadsheet's data fill one div (instagram)

  • have the other spreadsheet's data fill the other div (readPocket)

right now, even though the spreadsheets have different filenames, worksheet names and column headers, it still won't correctly fill the divs when the two sheets' data are lumped together.

i think i need to filter them back apart and then fill the divs but i'm having trouble doing that.

this is all started because I was like, "ooh want can i do with all the stuff ifttt.com will put into a spreadsheet!

<html>
<body>
<div class="span1">
<h3>Lastest Instagram</h3>
<div id="instagram"></div>
</div>
</div><!-- end span1 -->
<div class="span2">
<div id="pocketReader"></div>
</div><!-- end span2 -->
</div>
<script id="instagram" type="text/html">
<table>
{{#rows}}
<tr><td class="postDate">{{instadate}}</td></tr>
<tr><td class="instaImg"><img src="{{instasource}}" width="209.25px"/></td></tr>
<tr><td class="instaCaption">{{instacaption}}</td></tr>
{{/rows}}
</table>
</script>
<script id="pocketReader" type="text/html">
<table>
{{#rows}}
<tr><td class="postDate">{{readdate}}</td></tr>
<tr><td class="instaCaption">{{readtitle}}</td></tr>
{{/rows}}
</table>
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
loadSpreadsheet(showInfo)
})
function showInfo(data, tabletop) {
// var instaData = tabletop.sheets("Insta")
// var readData = tabletop.sheets("readPocket")
// console.log(instaData)
var instagram = ich.instagram({
"rows": getLast(data)
})
var pocketReader = ich.pocketReader({
"rows": getLastFive(data)
})
document.getElementById('instagram').innerHTML = instagram;
document.getElementById('pocketReader').innerHTML = pocketReader;
}
</script>
</body>
</html>
var URL = 'https://docs.google.com/spreadsheet/pub?key=0Ao5u1U6KYND7dGRZbTUwd3JQZ1k3OE9KTVZqZUYwZHc&single=true&gid=0&output=html';
var URL2 = 'https://docs.google.com/spreadsheet/pub?key=0Ao5u1U6KYND7dERheVpFZThEUkdPZnFXXzMxTzJ3dEE&single=true&gid=0&output=html';
function loadSpreadsheet() {
var a = Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
var b = Tabletop.init( { key: URL2, callback: showInfo, simpleSheet: true } )
}
@chachasikes
Copy link

// something like this?

var myJS = {};
var a = {};
var b = {};
var localData = {};

window.onload = function() {

myJS.loadSpreadsheets();

};

myJS.loadSpreadsheets = function() {
var URL = 'https://docs.google.com/spreadsheet/pub?key=0Ao5u1U6KYND7dGRZbTUwd3JQZ1k3OE9KTVZqZUYwZHc&single=true&gid=0&output=html';
var URL2 = 'https://docs.google.com/spreadsheet/pub?key=0Ao5u1U6KYND7dERheVpFZThEUkdPZnFXXzMxTzJ3dEE&single=true&gid=0&output=html';

var a = Tabletop.init( { key: URL, callback: myJS.showDataA, simpleSheet: true } )
var b = Tabletop.init( { key: URL2, callback: myJS.showDataB, simpleSheet: true } )

};

myJS.showDataA = function(data) {
console.log(data);
var data = data;
localData.a = data;

// Do things to output…
};

myJS.showDataB = function(data) {
var data = data;
localData.b = data;
console.log(localData);
// Do things to output…
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment