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

General Discussion

Script Trouble - File Structure?

Hello, Hello,

I've been working on this project for quite a while now. I've been working and testing it using the Chrome extension 200 OK! as a local server. When I committed everything to github ( https://github.com/TheIdiotTourist/THEIDIOTTOURIST ) and published the site my app.js doesn't load the content like it was while using the local server ( https://theidiottourist.github.io/THEIDIOTTOURIST/ ). I believe this might be caused by my file structure, I tried updating the path in Dev Tools to no avail.

I'm trying to utilize the jQuery .load method to insert all the content as modules so to speak. Is there a better way to achieve this or is it just a matter of writing the correct file path? Any guidance welcome and appreciated.

UPDATE: If you get a 404 error with the above link use https://theidiottourist.github.io/THEIDIOTTOURIST/index.html... I will try to get this fixed ASAP. Thanks.

3 Answers

// Your script tag
<script src="./scripts/app.js"></script>

// Try loading the app.js like this
<script src="scripts/app.js"></script>

//github might not recognize the ./script/ syntax

Thank you for the suggestion. Unfortunately it didn't seem to work. My current commit has the suggested change.

https://theidiottourist.github.io/THEIDIOTTOURIST/index.html

Hey Jake, I believe I found the issue.

  • the partials in app.js needs to be capitilized, final code should be like this:
$(document).ready(function() {
    // This will fire when document is ready:
    $('#indexHead').load("./html/PARTIALS/index_head.html"),
        $('#indexNav').load("./html/PARTIALS/index_nav.html"),
        $('#idiotCarousel').load("./html/PARTIALS/carousel.html"),
        $('#tertNav').load("./html/PARTIALS/tertiary_nav.html"),
        $('#tertHead').load("./html/PARTIALS/tertiary_head.html"),
        $('#footerDiv').load("./html/PARTIALS/footer.html");
});
  • Also you had some extra '.' in the paths but I corrected them

Thank you! Your suggestions have helped me get this firing properly. Some of those file paths are for tertiary page elements hence the ".", getting those updated now. Also seems like my header links created a dependency for the firing so I had to directly link them rather than using .load.

Follow up questions, Do you know the reason for the case sensitivity on "partials"? Any suggestions for best practices or a better methodology for loading header links / footer scripts from separate files?

Thank you again for all the help! Stivan Radev

I'm glad to hear that. All I know is that if your folder is using capital letters then you should use capital letters on the url, otherwise It won't find the correct file and you will probably get a 404 back. As far as best practice for loading scrips/links I'm not really sure about that. I'm still pretty new to Javascript and I haven't done much with .load().

The case sensitivity still baffles me since I almost never write in caps for repositories or files. [shrugs] I'm just happy it's working. Thanks again!