My browser doesn't think my Javascript is … Javascript?

Question

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/grabber.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $('#search-js').submit(function() {
                var username = $("#bar-js").val();
                var result = grab(username);
                alert(result);
                $(".contents").html(result["twitter"]);
            });
        });
</script>

js/grabber.js:

function grab(username) {
    //var results = {};

    // run all the things
    //results["twitter"] = check_twitter(username);

    // return your (huge) map
    //return results;
    return "stuff";
}

When I trigger the function, nothing happens. If I take the code inside grabber.js and embed it into the page, it works. When I view the source with Chrome and click on the js/grabber.js link (in the HTML), Chrome tries to download the file instead of display it. If I click on Google's jQuery link, it gets displayed.

I'm new to the javascript world, but I've been at this for a while and can't seem to figure it out.

EDIT:

Chrome developer tools is giving me this:

Resource interpreted as Script but transferred with MIME type text/x-js: "http://0.0.0.0:8000/js/grabber.js".

I'm using Python's SimpleHTTPServer to create a temporary server for quick development. Could that be the issue?

Answer 1

I think for some reason your server is not setting the correct mime-type for .js files, try adding this to your .htaccess:

AddType text/javascript .js

Or maybe:

AddType application/x-javascript .js