Web page cannot find JS files

Developer help
1

Context:
I was changing my theme and I uploaded some custom JS files to the theme’s ZIP. Under the /assets/js folder there was already a file called script.js plus the other ones that I’d added.

When I loaded up my blog, the Chrome console shows error alerts for all of the files that I had uploaded with GET http://xiao.io/assets/js/xxx.js/ net::ERR_ABORTED. So I decided to test the URL with the script.js file that was there before I uploaded the others. http://xiao.io/assets/js/script.js worked, while all the other file names just resulted in 404 not found.

Then I decided to check if the directory was correct, so I went to my VPS’ terminal, went to the folder where I uploaded the JS files and renamed the script.js file. Now when I tried going to http://xiao.io/assets/js/script.js it stopped working. So I knew the directory was correct.

But then the strange thing happened, when I renamed the file back to script.js, the browser couldn’t find it anymore. http://xiao.io/assets/js/script.js raised the 404 not found error just like all the other files I uploaded. I thought it might have been a permission problem, but when I switched the theme back to what I used before, those custom JS scripts that worked before stopped working now. They now raise the same GET http://xiao.io/assets/js/xxx.js/ net::ERR_ABORTED message.

I tried restarting ghost and restarting the VPS with no luck.

2

Problem solved!

It turned out to be a Chrome cache problem. Clearing Chrome’s cache or using another browser solved the problem. I’m definitely going to use cache busting from now on!

3

Were you using the {{asset}} helper? It should have done the cache-busting for you :smile:

4

ahhh, who would’ve thought reading docs of the platform you are using might solve your problem! haha, rookie mistake, thank you :smiley:

5

I tried the {{asset}} helper but it raised an error in Chrome. Could you maybe help me find the mistake?

The code injection:

<script src="{{asset "js/webfont.js"}}"></script>
<script src="{{asset "js/snap.svg-min.js"}}"></script>
<script src="{{asset "js/underscore-min.js"}}"></script>
<script src="{{asset "js/sequence-diagram-min.js"}}"></script>

Chrome console error:

GET http://xiao.io/introduction-to-encryption-symmetric/%7B%7Basset/ net::ERR_ABORTED    (index):278
GET http://xiao.io/introduction-to-encryption-symmetric/%7B%7Basset/ net::ERR_ABORTED    (index):279 
GET http://xiao.io/introduction-to-encryption-symmetric/%7B%7Basset/ net::ERR_ABORTED    (index):280 
GET http://xiao.io/introduction-to-encryption-symmetric/%7B%7Basset/ 404 (Not Found)    (index):281
6

You can’t use handlebars in the Code Injection inputs, they are just plain text fields that are output as-is.

To use the {{asset}} helper you would need to use it in your theme’s .hbs files.

1 Like
7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.