jQuery works on local host, but not on website

Question

Using Notepad++ and XAMPP to test stuff, then I upload it to the website over FTP. In the head of my code, I have this to call jQuery and the script:

 <script type="text/javascript" src="/jquery.js"></script>
 <script type="text/javascript" src="/portfolio.js"></script>

and it works fine locally on my XAMPP server. But as soon as it's uploaded onto the host, it throws this error:

Resource interpreted as script but transferred with MIME type text/html.

Not sure what's going on, or why it's having a hard time using jQuery. Any ideas?

Answer 1

This is not specific to jQuery at all. When you load your page from the server, a request is sent to the web server to download /jquery.js. In the server's response, there is a HTTP header which gives a hint about the type of the file to the client. This is called the Content-Type header. The above error message says that the server reports (incorrectly) that /jquery.js is of type text/html, while it is not.

You have to modify the configuration of the remote web server to ensure that files with .js extension are properly reported as having application/x-javascript as their MIME type instead of text/html. This can be done by the following directive in an Apache configuration file:

AddType application/x-javascript .js

I'm not sure why your other .js file works, though. Anyway, if you cannot modify the web server config for any reason, you can try using an externally hosted copy of jQuery instead.

It might have also happened that you hit a bug in WebKit/Safari if you are using Safari on Mac OS X. See this related question.

Answer 2

It means your server isn't configured to use the correct content-type for js files. It sends them as text/html instead of text/javascript. Probablyy the server aint configured right.

Answer 3

Why not use the google hosted version which a lot of people will probably already have cached and it always stays updated, etc..

http://code.google.com/apis/ajaxlibs/

Answer 4

Turns out the file name "jQuery.js" is what messed it up. Locally, the uppercase 'U' wasn't an issue, but on the server it's what caused it to break. I didn't even know this could happen :-/