We Keep Coding

AudioJS, jQuery Not allowed to load local resource

I know there are similar questions, but I could not find one explaining what I am trying to do.
At one of the events I will be working, the MC will need to play music from his browser (it has been set up like that to update all live schedules).
The problem that I have is I get the Not allowed to load local resource error when I try to load the audio file from the local drive.
The reason I am trying to load the file from the local drive is for in case the network fails or something happens to the local server, then the event can still continue.
I have read that Chrome gives this error for privacy and security reasons, but Firefox does not load the file and gives no error for doing so.
Is there a browser where this will be possible or is there a way to change browser settings to allow this?
I have tried using the Flash settings to add the file's location as a trusted location, I am however unable to find a flash settings that says "Load from local disk (only)".
Thanx in advance.

No, it's not possible to load files from the local machine for security reasons. Imagine what I could read from your machine if it was >:D
You have to run your code on a web server, and also host the file there. You can easily install IIS if you're on Windows as it's included as an additional component. There's also XAMPP which is free.

jQuery .load() with Relative Path - XMLHttpRequest Cannot Load - Workaround?

I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script

The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?

Why not using something more straight foreword like mustache.js ?

I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.

Can't load content inside a div

I am trying to load some content inside a div #display. I have read many questions regarding this matter here, but still I have been unable to get it working. The alert function which I have just added for testing purpose works without any problem.
Here is what I have tried
$(document).ready(function(){
$('#townships').click(function() {
$('#display').load("helloworld.html");
alert("Hi");
});
});
I am trying this offline. The helloworld.html file is in the same folder with the homepage file.

I am trying this offline
I believe this is your problem. AJAX requests to the local filesystem will be blocked by the browsers' security settings.
You need to run it under a webserver, either on your local machine, such as WAMP/LAMP/IIS or on a remote machine.

You can not do AJAX request without loading files from some server. Doing it by loading files from file system won't work because of SAME ORIGIN policy. Since there is no domain to compare to the AJAX requests fail. You can see the exception while doing it in Chrome.
This is relevant
AJAX code do not run locally

You should put your html file in a web server. If you have python installed, you can just type
python -m SimpleHTTPServer [port]``
In order to have a rapid web server in your working directory.

is there a way to execute phantomJS statements in chutzpah?

I'm running some Qunit tests to test a framework. I'm not able to fetch the cookies from phantomJS as my test hangs there. It's not able to read cookies.
I tried to fetch the fetch phantom cookies with phantom.cookies function, yet chutzpah doesn't execute those statements ? is there way for me to fetch phantom cookies with chutzpah ?

document.cookies should work as long as you are not violating the same-origin policy. This gets tricky when you are running with local files sometimes since the origin of file system files is odd. I pass into Phantom the argument to ignore allow cross domain loading but I wonder if that doesn't apply to cookies.
Couple things
Can you give me a sample zip which repros your problem?
You might want to file a bug on PhantomJS which says document.cookies should return from other domains if you set
page.settings.webSecurityEnabled = false;
Thanks!

javascript not working on localhost

Ok so I'm lost here, frustrated and pulling my hair and out. Plus probably about to be fired or take a pay cut.
I moved Files from a development server to my local machine. The files are consistent (used diff tool), all the dependencies are there. It works for the most part. The problem is that the some of the javascript (not all) is just not working. We're using jquery and a lot of plugins for it. I've checked with the web developer plugin in firefox and all the js files are loading. I cleared the cache in both firefox and chrome multiple times to no avail. The development server is a windows server running wamp. My local machine is running ubuntu. Somebody tell me what I missed.

Download firebug as a Firefox extension and view the http request and responses.
Easiest may be from within the 'net' tab to determine if your script is making a request.
Very likely that it is a source domain issue. There are no work-around for this issue. The ajax request and the source data must be on the same domain.

It may have something to do with JavaScript's security limitations. (In certain circumstances) You can only operate on URLs or pages from the current domain, which most likely changed when you moved the files off the other server. More here.

Are you running the files via a webserver, or just opening the files directly? If it's the latter, you'll want to set up a server on your local machine for local testing, and serve the files using it. Otherwise, you'll very likely run into the domain restrictions others have mentioned above.

You may need to host the site using a local server. VS IDE has an add-on called live server. You need to set up a workspace in order for it to work. The port used on my machine was 5500.
You need to make sure any dependencies for javascript are running on your server or the javascript will not be executed. These dependencies are listed in the json file.
ex. If you require express, you need to be running node or the javascript won't execute in your web browser.
In the terminal:
node app.js
Any dependencies that are not installed and running on the server will not execute.

Are you accessing the html web pages through the webserver and not simply double clicking the file to open it?
Also if you have WebDeveloper toolbar installed the click "Disable", "Disable Javascript" and make sure "All Javascript" isn't ticked.