Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sheetrock not working: $ is not defined #125

Open
wmx11 opened this issue Aug 17, 2017 · 1 comment
Open

Sheetrock not working: $ is not defined #125

wmx11 opened this issue Aug 17, 2017 · 1 comment

Comments

@wmx11
Copy link

wmx11 commented Aug 17, 2017 •
edited

Hello, everyone, I'm new to GitHub and to programming in general - hope to learn a lot and improve!

I run a website that requires lots of data that I tediously copy-paste from google sheets into fancy CSS preformatted tables. I have recently found Sheetrock.js and want to make my information from Google Sheets behave to a similar fashion of Ico Alert (https://www.icoalert.com/).

From my rookie understanding, I would be able to place the information into <div> tags with custom styling and Javascript for mouseover/off animations.

Everything seemed ok when I tried this in jsFiddle on Sheetrock website (yes, I managed to put the information into <divs>). Then I wanted to replicate this on my own in Sublime but I encountered a problem. Whenever I run the page, nothing appears and the console says the following:

Uncaught ReferenceError: $ is not defined
at sheets.html:8
(anonymous) @ sheets.html:8

I open up the code and the fault is in this line:

var HRTemplate = Handlebars.compile($('#hr-template').html());

I use the links provided on Sheetrock website with Handlebars CDN yet it shows that $ is undefined. Maybe there is a fault in the code or am I doing something wrong on my side?

I write everything in a single sublime sheet, no external Javascript files.
Also, I wll want to include Bootstrap as well.

Thank you for your help!

My code is this:

<!DOCTYPE html>
<html>
<head>
<script src="http://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
	<script>
		var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1mzj7q17289MZUXveKa3Dn8xbsCJLu-_qxUHoeBwaYw8/edit#gid=1420307382';
		var HRTemplate = Handlebars.compile($('#hr-template').html());
$('#hr').sheetrock({
  url: mySpreadsheet,
  fetchSize: 5,
  rowTemplate: HRTemplate
});
	</script>
</head>
<body>
<h4>ICOs</h4>
<ol id="hr">
  <script id="hr-template" type="text/x-handlebars-template">
    <li>
      <strong>{{cells.Name}}</strong>
    </li>
  </script>
</ol>
</body>
</html>
@chriszarate
Copy link
Owner

Hi! You'll need to include jQuery (which presents itself as the variable $, thus the error message). Make sure you include it before you include Sheetrock, so that it can register as a plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chriszarate @wmx11