I have two files: HTML and JavaScript. The names are culminating.html and javascript.js. I have jQuery code in the .js file which is supposed to send the contents of a text file to the div
bottom_pane_options.
Here is the jQuery code:
$(document).ready(function() {
$("#readFile").click(function() {
$.get('./test.txt', function(data) {
$("#bottom_pane_options").html(data);
}, 'text');
});
});
And the html:
<!DOCTYPE html>
<html>
<head>
<title>Culminating</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button onclick="get_parameters()">Try It</button>
<button id="readFile">Read File</button>
</div>
</div>
</body>
With this code, I am getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
and
XMLHttpRequest cannot load file:///G:/test.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource.
I know I need to add Access-Control-Allow-Origin: *
but I'm not sure where.