I currently have 3 files; they are in the same directory on my puter:
- project.html
- javascript.js
- text.txt
Code in 'project.html'
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js">
</script>
<script
//calling the Google Maps API
</script>
<script>
//code to initialize Google Maps
</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>
</div>
</div>
</body>
</html>
Code in 'javascript.js'
function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', (output) => {
if (xhr.readyState === 4) {
var response = xhr.responseText;
callback(response);
}
});
xhr.open('GET', 'text.txt', true);
xhr.send();
}
Text in 'text.txt'
- Iron
- Aluminum
- Steel
etc... (close to 150 lines)
At the end of everything, I would like to parse 'text.txt' into an array and use that array to create an option menu with the array's content. I have posted a question asking whether I can parse the file using JavaScript and the answer was no due to security issues. The JavaScript code is what I have tried but has not worked. That said, is there another language I can use to read the file and create the option menu?
I would eventually like to have something like this (below) in the 'project.html' file:
<select>
<option value="1">Line 1 of File</option>
<option value="2">Line 2 of File</option>
<option value="3">Line 3 of File</option>
<!-- etc... -->
</select>
Some things to keep in mind:
- All files are not on a server but are rather running from my puter (so I'd guess server-size languages like
PHParen't an option) - I would like to auto-create an option menu based on the content in 'text.txt'
- The files are in the same directory
- I would not like the user to be able to choose which file to read. 'text.txt' is a file that is made from and filled by another program I have made and is likely to change; that's why I want to read the file every time the page loads.
I currently have 3 files; they are in the same directory on my puter:
- project.html
- javascript.js
- text.txt
Code in 'project.html'
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js">
</script>
<script
//calling the Google Maps API
</script>
<script>
//code to initialize Google Maps
</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>
</div>
</div>
</body>
</html>
Code in 'javascript.js'
function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', (output) => {
if (xhr.readyState === 4) {
var response = xhr.responseText;
callback(response);
}
});
xhr.open('GET', 'text.txt', true);
xhr.send();
}
Text in 'text.txt'
- Iron
- Aluminum
- Steel
etc... (close to 150 lines)
At the end of everything, I would like to parse 'text.txt' into an array and use that array to create an option menu with the array's content. I have posted a question asking whether I can parse the file using JavaScript and the answer was no due to security issues. The JavaScript code is what I have tried but has not worked. That said, is there another language I can use to read the file and create the option menu?
I would eventually like to have something like this (below) in the 'project.html' file:
<select>
<option value="1">Line 1 of File</option>
<option value="2">Line 2 of File</option>
<option value="3">Line 3 of File</option>
<!-- etc... -->
</select>
Some things to keep in mind:
- All files are not on a server but are rather running from my puter (so I'd guess server-size languages like
PHParen't an option) - I would like to auto-create an option menu based on the content in 'text.txt'
- The files are in the same directory
- I would not like the user to be able to choose which file to read. 'text.txt' is a file that is made from and filled by another program I have made and is likely to change; that's why I want to read the file every time the page loads.
-
1
FYI, if your page is running under
file://protocol rather thanhttp://, your AJAX request may well not work due to javascript security sandboxing. If you don't have a server, try MAMP or WAMP (free I believe) to set up a local web stack. – Adam Hopkinson Commented Jan 12, 2014 at 21:42 - what errors are you getting? – markasoftware Commented Jan 12, 2014 at 21:44
- It's unclear what you're asking. Do you want help with splitting the response into an array? – bfavaretto Commented Jan 12, 2014 at 21:51
- Even if your files are just running on your puter you can still setup XAMPP or WAMPP or whatever locally to be able to use PHP. – Arnelle Balane Commented Jan 12, 2014 at 22:08
- Is that difficult to do? This project is due in 5 days so I want to be using things that won't take up too much time. – user3015565 Commented Jan 12, 2014 at 22:50
3 Answers
Reset to default 1If you can tweak browser settings there is no reason why you can't do this with just javascript. Below is an example using jQuery, you could convert it to plain Javascript but that would take a lot more code.
$(document).ready(function() {
//fetch text file
$.get('text.txt', function(data) {
//split on new lines
var lines = data.split('\n');
//create select
var dropdown = $('<select>');
//iterate over lines of file and create a option element
for(var i=0;i<lines.length;i++) {
//create option
var el = $('<option value="'+i+'">'+lines[i]+'</option>');
//append option to select
$(dropdown).append(el);
}
//append select to page
$('body').append(dropdown);
});
});
It worked fine on IE10 with just a dialog asking if I wanted blocked content to run. Other browsers may or maynot need other security settings played with to get it to work.
If you have no web server, you can't do standard XHR requests: XHR requests involve performing HTTP requests towards a web server, that you don't have.
From the XMLHttpRequest specification:
some implementations support protocols in addition to HTTP and HTTPS, but that functionality is not covered by this specification
Therefore some browsers supports the file protocol by automatically converting XHR requests to "normal" file loads, but what you need to do to make it work can vary from browser to browser and I discourage you to follow that path.
The best solution is to use a lightweight web server and distribute it with your application.
Once you can do AJAX requests to your web server, retrieve the file contents and obtain the array of lines using split. I'm assuming that from this point on you know how to iterate over the array and modify the DOM consequently.
You mentioned to be in a hurry for this project. Probably you could include jQuery in your application to make your life easier.
or vanilla:
function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', (output) => {
if (xhr.readyState === 4) {
var response = xhr.responseText;
var lines = response.split('\n');
var i = 0;
var select = document.createElement('select');
do
{
var option = document.createElement('option');
option.value = i;
option.text = lines[i];
select.appendChild(option);
i++;
}while(i<lines.length);
document.body.appendChild(select);
}
});
xhr.open('GET', 'text.txt', true);
xhr.send();
}