My browser doesn't read my Javascript ... Javascript?

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 run the function, nothing happens. If I take the code inside grabber.js

and paste it into the page, it works. When I view the source with Chrome and click on the link js/grabber.js

(in HTML), Chrome tries to download the file, not display it. If I click on the jQuery Google link it displays.

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

EDIT:

Chrome developer tools give me this:

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

      

        
        
        
      

    

I am using Python SimpleHTTPServer to create a temporary server for quick development. Could this be the problem?