Permission Denied using Javascript/jQuery on a local file

Question

function publish(text) {
 $('#helpdiv').prepend(text);
}

function get_help(topic) {
  $.get(topic, publish);
}

<p>Hi. <a href="#" onclick="get_help('inline-help.html'); return false;">click here for more help.</a></p>
<div id="helpdiv"></div>

I've inherited this chunk of HTML and javascript above (snippet). It is/was going to be used as local help. Currently it is online only and it works fine. However, when I copy the files locally, I get "Permission Denied" in Internet Explorer and in Chrome doesn't do anything when I "click here for more help". What it's supposed to do is load the help content from inline-help.html and display it in the helpdiv div. Now here is the kicker, if I take the same files and copy them to inetpub on my PC and load them as http://localhost/hello.html it functions perfectly.

Presumably this is a security thing where the "local" zone isn't allowing me to load files off of the user's HD? But I'm not really sure what's going on and would like to understand this problem further and potentially come up with a workaround.

Any insight is greatly appreciated.

Answer 1

I don't think your browser is allowing you to run javascript locally (using the file:/// access method). But when you load it from http://localhost/ it works fine.

You need to either develop on a website, or use your localhost server.

Answer 2

jquery's "get" uses xmlHttpRequest, which doesn't work on local files, unfortunately. If you really need to be able to fetch local data (or data from a different domain) asynchronously, you should use dynamic script tags. However that means the data file has to be reformatted as JSON data.