General Discussion

Jake Snider
Jake Snider
16,716 Points

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

Stivan Radev
Stivan Radev
5,462 Points
// 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
Jake Snider
Jake Snider
16,716 Points

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

Stivan Radev
Stivan Radev
5,462 Points

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
Jake Snider
Jake Snider
16,716 Points

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

Stivan Radev
Stivan Radev
5,462 Points

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().

Jake Snider
Jake Snider
16,716 Points

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!