JS File Not Loading When URL is Directory - javascript

I wrote a simple 404 page for my website that tells you a joke every time it is loaded. I am accomplishing this with the use of the StackExhange API and am drawing questions off of this thread.
Everything works as intended when I purposely trigger the 404 page with a garbage file url. For example when I go to www.domain.com/garbage, the 404 page loads as expected. My 404.shtml has a script tag that loads a 404.js script that I wrote and everything is great.
However, when I attempt to get a 404 page by routing to a garbage directory as apposed to a garbage file, the script cannot be found. For example, www.domain.com/garbage/ does NOT load the 404.js script despite the correct 404.shtml page being loaded.
Here is the head section of my HTML file.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="404.js" type="text/javascript"></script>
</head>
Note: The external jQuery script is loaded both times, but 404.js is only loaded for the first request example.
Here is the console for both requests, the first one is the request for a garbage file and the second is the request for a garbage directory.
First URL: www.domain.com/garbage
// a long JSON response from the StackExhange API that indicates that the script loaded
Second URL: www.domain.com/garbage/
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (404.js, line 0)
Question What is causing the 404.js script to not be loaded when I attempt to access an invalid directory within my site when the same script loads when I attempt to access an invalid file?
What I Have Tried
A plethora of Google searches.
Triple check that all script tags are pointing to the correct files
Thank you for your time. If you wish to do some more digging, you can see the actual problem in action at briantracy.xyz/garbage and briantracy.xyz/garbage/.

Big Thanks to #rfornal for suggesting making a relative file path to the script. Channging the following line in the head section
<script src="404.js" type="text/javascript"></script>
^^^^^^
by prepending the root directory (where 404.js is located) to the file path does the trick.
<script src="/404.js" type="text/javascript"></script>
^^^^^^^

Related

Javascript in different folder than HTML

I'm new to web development. I have issues with having files stored in different folders (for safety reasons). Here's the index page which returns an error
<head>
<script src="../scripts/script.js"></script>
</head>
<body>
<?php include "../php/page.php"; ?>
Other code here...
</body>
My file structure is as follows
www/
html/
index.php
scripts/
script.js
php/
page.php
I don't get why including php file works (row 5 in the example code provided) and including javascript doesn't (row 2). I guess you're interested about the error so here's what Google Chrome's console says
Failed to load resource: the server responded with a status of 404 (Not Found)
It also shows that link to the resource and it appears to look for my.server.address/scripts/script.js like it doesn't care the ../ part. Can someone explain this behaviour?
PHP resolves paths on the computer's file system.
Web browsers resolve paths on the URL.
Your HTTP server has http://my.server.address/ mapping to www/html on the file system.
So ../scripts/script.js goes up one level from / … to / (because that is the top), then down to /scripts then down to /scripts/script.js.
The browser asks the HTTP server for /scripts/script.js and it maps that to the file system — www/html/scripts/script.js and returns a 404 because that file doesn't exist there.
The browser can only read data that the web server will send to it, and by keeping the scripts directory outside of the document root you haven't make it available via the web server.
Change
<script src="../scripts/script.js"></script>
to
<script src="/scripts/script.js"></script>
And your folder structure should be:
www/html/index.php
www/html/scripts/script.js
www/html/php/page.php

Why can't I get my script tag src's to work?

I have been coding up a localhost, and I made the localhost by using of course a JavaScript file to do so, and I then made it reference an HTML file. However, I noticed that when I am using localhost to serve up the HTML file I get this error:
"GET http://localhost:3333/filetesting.js"
The filetesting.js is that js file, there are also other things I'm referencing too, like websites. I'm referencing it by using script tag src.
I looked at the network on developer tools of it and it says it's a 404 error not found. I'm trying to figure out how to reference my script tag src's without having localhost:3333 go before it.
When I run the HTML file without using the localhost, it works just fine when it comes to the script tag src's. If you do not entirely understand what I'm asking for, just ask.
Assuming that your script will always reside in the root level of your website, you can simply target it with the root-relative prefix /:
<script src="/filetesting.js"></script>
This will load your script from the root, regardless of the site the file is hosted on. For example, on http://localhost:3333/ it will load the file from http://localhost:3333/filetesting.js, and from http://localhost:3333/folder/, it will attempt to load the file from the same location.
If you move your files over to a proper website, it will still work the same way: www.example.com will look for the file at www.example.com/filetesting.js, and www.example.com/folder/ will look for the same file at www.example.com/filetesting.js.
Hope this helps! :)

Load scripts in html-file from same subdirectory (Apache)

I feel like asking the most stupid question, but i searched for a while now and could not get it figured out.
I have the following file structure under my Apache DocumentRoot:
DocRoot
- page1
- ...
- webapp
- index.html
- somescript.js
with index.html having a script tag looking like
<script src="somescript.js" type="text/javascript">
How do i configure Apache to serve https://myhostname.com/webapp so that the script get's loaded correctly? Page1 should stay accessible under https://myhostname/page1.
The current behaviour is that somescript.js does not get found, because the request is https://myhostname.com/somescript.js.
I do NOT want to set up a Virtual Host for this or edit the html file (get's generated).
Are webapp and page1 located in var/www/html? If so, probably your JS file is searched in html folder.
You have, at least, 2 solutions:
<script src="/webapp/somescript.js" type="text/javascript">
Configure virtual hosts for webapp and page1. So, you'll be able to connect to that pages via webapp.myhostname.com and page1.myhostname.com subdomens, and <script src="somescript.js" type="text/javascript"> will work for both of them, searching in their folders

Javascript not found in my ASP.Net Application

I am having a problem in the location of my javascript, the location is right, but when I run it in my visual web developer 2010 express, the location can not be found, I don't know the reason why...
here is the location of my javascript:
<script src="Style/javascript/jquery-1.7.1.js" type="text/javascript"></script>
here is the error:
**Server Error in '/Maitenance' Application.**
**The resource cannot be found.**
**Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.**
**Requested URL: /Maitenance/Maintenance/Style/javascript/jquery-1.7.1.js**
Use this... It will work
<script src="<%=Page.ResolveUrl("~")%>Style/javascript/jquery-1.7.1.js" type="text/javascript"</script>
I guess you are using a master page and your .aspx page is put in another directory. The file path you included in master page is relative to the .aspx file. It works OK when your page in the same directory with the master page.
You can include your js file using ResolveUrl:
<script src="<%=ResolveUrl("~/js/jquery.js")%>" type="text/javascript"></script>
or you can include your script in the code behind of master page:
ClientScript.RegisterClientScriptInclude("jquery", ResolveClientUrl("~/js/jquery.js"));

asp.net unable to locate a resource file

Im attempting to utilize some custom script and css files within an asp page. In Visual Studio 2010 I am not getting any warnings or errors as to the status of these files, but when I attempt to run the page, and I open the javascript console I get the error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Here's how I am attempting to load the files in my ascx file:
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.scripts.js"></script>
<script type="text/javascript" src="scripts/jquery.alerts.js"></script>
<link href="styles/jquery.alerts.css" rel="stylesheet"/>
Anyone know whats going on here, why the browser can't locate the files but visual studio can?
This happens when the location of the .aspx file is different to the location of the user control (ascx).
When the user control is rendered in the browser it will actually have the location of the .aspx and tries to make the reference from that point. Whereas in VS, it will try to make the reference to the file from the .ascx location.
Therefore, try referencing the files as if you were making the references from the .aspx file location. It shouldn't give you any error when rendering that page.
I've upvoted aleafonso's answer since he's correct. Now, to solve this issue, you can use the ResolveClientUrl method.
Something like this:
<script type="text/javascript" src='<%=ResolveClientUrl("scripts/jquery.js"%>'></script>

Categories