Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Samuel Durkin
48,402 PointsRiley Hilliard's ReportCard.js
Hello,
I was just looking at Riley Hilliard's excellent ReportCard.js. I remember looking at it before and being impressed, but looking at it today it seems that Treehouse is blocking the loading of the JSON necessary for the script to function. Is that correct? Or a temporary problem?
This affects both the original site and whenever I try and implement the plug-in locally:
9 Answers
Samuel Durkin
48,402 PointsI should have mentioned that this is the console error given both on Riley's site and locally:
"XMLHttpRequest cannot load http://teamtreehouse.com/rileyhilliard.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://reportcard.rileyh.com' is therefore not allowed access."
Julian Aramburu
11,368 PointsHey Samuel!
Yesterday Treehouse implemented https on their website so I think that could be the problem! You should wait till Riley improve the code in order to work again!
Cheers!
Samuel Durkin
48,402 PointsThanks Julian, I'll send Riley a message to give him a heads up as well.
Many thanks!
Dave Huish
17,727 PointsHey guys, just go into reportcard.js and add a 'S' to http://teamtreehouse.com as shown below.
function Treehouse(params) { Treehouse.super.constructor.call(this, params); this.url = "https://teamtreehouse.com/" + this.userName + ".json"; }
It worked for me.
Cheers,
Dave Huish
Samuel Durkin
48,402 PointsFantastic Dave, will try it later (and directed Riley to your comment as well).
Russel Klueg
2,813 PointsCan someone give me a quick rundown on how to use this? I tried following Riley's tutorial but as I'm still REALLY new to HTML, CSS, and JS I'm fairly certain I'm missing something that is assumed one would know.
Samuel Durkin
48,402 PointsHave you used any jQuery plugins before? First of all create a div in your page where you'd like it to go, then apply the script in the footer of your page.
I'm just on my phone now, but will posta better walkthrough when I get home if you're still unsure.
Russel Klueg
2,813 PointsSamuel Durkin, No I've never used jQuery before. But I did download the full zip file from Riley Hilliards Git Hub and used the html file he provided to make sure I had everything in the right spots which is why I think I'm still missing something.
Samuel Durkin
48,402 PointsFirst of all include jQuery in the head of your website (where you include your CSS files). It should look something like this:
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
Then link the CSS file for the ReportCard.js plug-in to the head (your route to the file may be slightly different, so please check this):
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="/js/reportcard/css/badges.css">
</head>
Then add the link to the JS file for ReportCard.js just before the </body> tag. It will look something like this:
<script src="/js/reportcard/js/reportcard.js"></script>
</body>
Add the div container for ReportCard.js inside your body container wherever you'd like it to appear:
<div class="report-card treehouse"></div>
Then add something like this to the footer of your page:
<script>
jQuery('.report-card.treehouse').reportCard({
userName: 'russellklueg',
site: 'treehouse',
badgesAmount: 7
});
</script>
".report-card.treehouse" refers to the div you created in the previous step, so if you want to change that to something else, make sure you do it in both places (or the script won't find the div).
Any problems just let me know.
Russel Klueg
2,813 PointsI still haven't figured it out. I tried a bunch of different stuff to make it work. but I can't get it to. Could you point out where my mistake(s) is/are? I really appreciate your help. My head
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="reportcard/css/badges.css">
</head>
Main Body
<h1 id="main-header">Galleries</h1>
<div id="wrapper">
<section>
</section>
<footer>
<div class="report-card treehouse"></div>
<script>
jQuery('.report-card.treehouse').reportCard({
userName: 'russellklueg',
site: 'treehouse',
badgesAmount: 7
});
</script>
</footer>
</div>
<script src="reportcard/js/reportcard.js"></script>
</body> I hope this helps you. If not I could post my code in a google docs or something for you to look at. Also, It's not showing it but my closing body tag is the next line.
Julian Aramburu
11,368 PointsHey Russel! Are you in Chrome (or Firefox)? Could you please open your devtools (F12 with Chrome) and check for errors at the Console?
Russel Klueg
2,813 PointsChrome! It's the only browser I use! And I sure will. One sec!
Russel Klueg
2,813 Points"Uncaught TypeError: jQuery(...).reportCard is not a function" It's saying the error is here: '''
<script> jQuery('.report-card.treehouse').reportCard({ userName: 'russellklueg', site: 'treehouse', badgesAmount: 7 }); </script>
Julian Aramburu
11,368 PointsRussel how are your files placed on your project directory?
Samuel Durkin
48,402 PointsI think this is likely the problem.
Mare sure this link:
<script src="reportcard/js/reportcard.js"></script>
is pointing to the correct project directory. Is the "reportcard" folder inside a JavaScript folder for instance.
Russel Klueg
2,813 PointsIt's not the link. I went as far as placing the script in the root directory for my website and still got the error.
I double checked and the link to the file from my projects root folder is reportcard > js > reportcard.js
The error is pointing at line 53 of my file which is this line: jQuery('.report-card.treehouse').reportCard({
Samuel Durkin
48,402 PointsIt's just that it's not finding the function, which suggests that the function (which is in the JavaScript file) isn't being found.
Russel Klueg
2,813 PointsIs there anything in the JS file I'm supposed to alter? Because right now it's exactly how I downloaded it from Riley's github.
Samuel Durkin
48,402 PointsYou shouldn't really ever have to edit JavaScript files for jQuery plugins, the main point of them is their ease of use (not to say you can't play around with them, just that you shouldn't have to for basic functionality).
Can you load Chrome DevTools (assuming you're on Chrome, if not I think most web browsers have something similar), go to the page that you're building and make sure that it lists reportcard.js on the left side of the sources tab.
It will look something like this:
Russel Klueg
2,813 PointsSamuel Durkin, Your comment got me thinking. I wiped it out my project and started over again. Low and behold this time it worked. I comparing my old file to my new one. I somehow messed up the function call when I copied it the first time. which is why it was saying the function could not be found. So in the end, the error was between the keyboard and the chair :P Though I do really appreciate all the help and advice you offered! I want to thank you as well Julian Aramburu! It was your idea to check the Chrome console that revealed the function error.
Samuel Durkin
48,402 PointsAwesome! Glad you finally cracked it!
Julian Aramburu
11,368 PointsHey man! Great to see you conquering it!!! Congrats :D!
Now keep coding!!!