Pulling Content From Text File Not Working JavaScript

Question

My code in my HTML file:

<!doctype html>
<head>
<title>Notes</title>
<script>
function PullNotes() {
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "notes.txt", true);
txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4 || txtFile.status == 200) {
        allText = txtFile.responseText;
    }

    document.getElementById('notetext').innerHTML = allText;
}
}
</script>
</head>

<body>
<div id="notetext"><p>Failed.</p></div>
<input type="button" value="Pull Notes" onClick="PullNotes()">
</body>
</html>

When I click the button. Nothing happened.

If you're wondering why it says "Failed" it's so I know that the JavaScript didn't update.

Thanks, ~BN

is notes.txt on your file system or on the http server? if you are accessing this html page via http://foo.com/index.html then notes.txt needs to be @ http://foo.com/notes.txt. You also need to `send()` the request I think. — NG., Sep 08 '13 at 22:38
Put this in your if-block: `document.getElementById('notetext').innerHTML = allText;` — , Sep 08 '13 at 22:38

score 0 · Answer 1 · answered Sep 08 '13 at 22:42

0

I believe you need to call txtFile.send() after you assign the onreadystatechange property. Check this out.

Also, notes.txt must be in a sibling location to the html file you are loading. I.e. foo.com/index.html -> foo.com/notes.txt

Your code becomes:

function PullNotes() {
    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", "notes.txt", true);
    txtFile.onreadystatechange = function() {
        if (txtFile.readyState === 4 || txtFile.status == 200) {
            allText = txtFile.responseText;
        }

        document.getElementById('notetext').innerHTML = allText;
    }; // end onreadystatchange prop
    // send the request
    txtFile.send();
}

answered Sep 08 '13 at 22:42

NG.

22,560
5
55
61

Where should I put it? The line right after .onreadystatechange? – Brandon Nguyen Sep 08 '13 at 22:45
Thanks!!! The txtFile.send(); Fixed it! But my text file is multi-lined and the whole thing comes as one line. – Brandon Nguyen Sep 08 '13 at 22:50
@Brandon - that's because you're inserting it as html, and HTML ignores the newlines. You could replace all `\n` with `
` as a hack - see this answer. http://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags – NG. Sep 08 '13 at 22:52
Or you could put it inside a `
```
` block.
```
– Barmar Sep 08 '13 at 22:56
Can you put every two lines in a separate div? – Brandon Nguyen Sep 08 '13 at 23:22
Or maybe one line even. – Brandon Nguyen Sep 08 '13 at 23:24

Pulling Content From Text File Not Working JavaScript

1 Answers1