I am developing a Django project on localhost with some included JavaScript files in a base.html template. My JavaScript includes are at the bottom of the page:
... other stuff...
<script src="/media/js/jquery.js" type="text/javascript"></script>
<script src="/media/js/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
<script src="/media/js/bootstrap.js" type="application/javascript"></script>
<link rel="stylesheet" href="/media/css/pepper-grinder/jquery-ui-1.9.1.custom.css" />
{% block extrajs %}
{% endblock %}
</body>
Sometimes, but frustratingly, not always, when I load or refresh a page, the GET request for one of the JavaScript files fails. Sometimes it’s the request for jquery-ui, sometimes it’s for jQuery itself, and other time it’s for bootstrap.js. If I paste the url directly into the browser, the JavaScript file loads perfectly fine, so it’s not a problem with my media urls.
In Chrome, if I click on the console error and view the network tab, the status says “(failed)” and the type says “pending.” The request headers seem to show that the request has not actually failed, it just hasn’t gone through at all.
Request URL:http://localhost:8111/media/js/jquery-ui-1.9.1.custom.js
Request Headersview source
Accept:*/*
Cache-Control:no-cache
Pragma:no-cache
Referer:http://localhost:8111/reservation/create/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Finally, loading the pages in Firefox does not produce an error, but shows that the response for the JavaScript files returns a 304.
Is this a problem with how I’m serving my static media (nothing special besides the usual static media settings)? with Chrome? How can I fix the issue?
Try disabling Chrome extensions and see if that helps. I had the same problem and it turned out to be Adblock extension that caused the problem.
UPDATE: According to @jessykate the full solution appears to be also to update Chrome to the latest version — at least 23.0.1271.91.