jlord / sheetsee.js

:eyes: :chart_with_upwards_trend: Visualize Data from a Google Spreadsheet
jlord.github.io/sheetsee.js
Other
2.96k stars 884 forks source link

Upgrading Sheetsee on existing project & "Undefined" function #56

Closed theoreticalgirl closed 10 years ago

theoreticalgirl commented 10 years ago

I've been using Sheetsee.js to publish a list of upcoming tourdates for my band. I noticed the the plugin was updated, and now I'm having trouble getting things to display properly.

Advance warning: I am not a coder (but rather a designer by trade). I am good at plugging in javascript when necessary and tweaking little bits here and there, but by no means do I understand the code itself.

In my particular use, I don't have Sheetsee output into a <table> but rather a bunch of divs. I suppose the example that would best match what I've done is the "pretty pennies" section of the table demo. I guess this uses elements of ICanHaz.js per the "tips!" page, but I don't particularly know how it's doing that.

I tried copying and pasting the demo code to work with my own stuff, but no luck. I'm getting an "undefined is not a function" error, which I don't know how to fix. Help?

You can view the code here:

http://no-other.org/shows/new.php

One final comment: Kudos on making Sheetsee easy enough to use that someone as clueless as myself could figure it out! :)

CrokinoleMaster commented 10 years ago

Hi. I'm not really sure what the problem is but I do notice you seem to have an extra closing </div> in your concerts template.

 {{/rows}}
 </div>
 </script>

It's a little hard to read since it's not indented so I could be wrong. :)

theoreticalgirl commented 10 years ago

@huaruiwu thanks for the assistance. I opened this issue per @jlord's request. Hopefully she can help!

max-mapper commented 10 years ago

@theoreticalgirl Hi, I believe the problem is that you need to move all of your <script> tags, e.g.:

<script src="../js/ICanHaz.js"></script>
<script src="http://no-other.org/fdn/js/vendor/jquery.js.pagespeed.jm.m3Gbi6SVWh.js"></script>
<script src="../js/tabletop.js"></script>
<script src="../js/sheetsee.js"></script>

down to the very bottom of the page, a good place would be right after the line with <!-- Modals --> on it

theoreticalgirl commented 10 years ago

@maxogden Great, let me give that a shot! Thank you!

max-mapper commented 10 years ago

the issue is that the sheetsee, icanhaz and tabletop script tags are above where the <script id="concerts" type="text/html"> template script is defined, but they need to run after it so that they can find the template when they go to look for it

max-mapper commented 10 years ago

also you might wanna give the <script id="concerts" type="text/html"> a different ID, as there is also <div id="concerts"></div> on the page, and IDs are supposed to be unique. But if you change the ID you will have to update other code that refers to it (hope this makes sense)

theoreticalgirl commented 10 years ago

@maxogden but in the demos the IDs are the same—why does it work there?

max-mapper commented 10 years ago

@theoreticalgirl ah i see, that is also technically wrong (it works but it could cause unexpected behavior). in html you are only supposed to have 1 thing with an id on a page

jlord commented 10 years ago

Woo woo, thanks @maxogden!

My bad on the ids being the same :blush: I'll fix that!

theoreticalgirl commented 10 years ago

YAY IT IS WORKING, I LOVE ALL OF YOU

max-mapper commented 10 years ago

any west coast tours coming up? come play oakland!

max-mapper commented 10 years ago

oh also, protip, if you put a 'loading message' inside your concerts div, e.g. <div id="concerts">Loading shows...</div> then it will get replaced by the shows when they load

theoreticalgirl commented 10 years ago

Thank you! (We will try to make it to the West Coast and let you know if we do!)

CrokinoleMaster commented 10 years ago

@maxogden That was amazing! Definitely a pro