read 2 text files with javascript

Question

i can't get javascript to load 2 text files with regular script or query and i need help, plz give and answer?

heres with jquery,

<script type="text/javascript">
setTimeout(function(){
   window.location.reload(1);
}, 1000);
</script>
<script language="javascript" src="file:///Users/trevor/Desktop/jquery.js" ></script>
<script type="text/javascript">
jQuery.get('file:///Users/trevor/Desktop/x.txt', function(data) {
    document.getElementById('xp').innerHTML = data;
});
</script>
<script type="text/javascript">
jQuery.get('file:///Users/trevor/Desktop/y.txt', function(data) {
    document.getElementById('xp').innerHTML = data;
});
</script>
<p id="xp">hi</p>
<br>
<p id="yp">hi</p>

and without,

<script type="text/javascript">
var client = new XMLHttpRequest();
client.open('GET', 'file:///Users/trevor/Desktop/x.txt');
client.onreadystatechange = function() {
  document.getElementById('xp').innerHTML = client.responseText;
}
client.send();
</script>
<script type="text/javascript">
var client = new XMLHttpRequest();
client.open('GET', 'file:///Users/trevor/Desktop/y.txt');
client.onreadystatechange = function() {
  document.getElementById('yp').innerHTML = client.responseText;
}
client.send();
</script>

and possibly...

<script type="text/javascript">
var x = document.getElementById('x').contentWindow.getElementById('xp').innerHTML

var y = document.getElementById('y').contentWindow.getElementById('yp').innerHTML

function updatex(){document.getElementById(xp).innerHTML = x}

function updatey(){document.getElementById(yp).innerHTML = y}

setInterval( "updatex(); document.getElementById('x').contentWindow.location.reload();", 1000 );

setInterval( "updatey(); document.getElementById('y').contentWindow.location.reload();", 1000 );


</script>
<p id="xp">hi</p>
<br>
<p id="yp">hi</p>

<iframe id="x" src="file:///Users/trevor/Desktop/x.txt"></iframe>

<iframe id="y" src="file:///Users/trevor/Desktop/y.txt"></iframe>

Have you tried this on localhost instead of file protocol? The latter can be a bit funny. — alex
– alex, Commented Sep 19, 2011 at 4:24
Modern browsers has security issues reading files. Run a local Apache server or IIS so you do not have these issues. — epascarello
– epascarello, Commented Sep 19, 2011 at 4:29

Kobi · Accepted Answer · 2011-09-19 05:10:56Z

1

You can use setInterval to load the files periodically. Here's a little refactoring:

function loadFile(url, elementId){
    var client = new XMLHttpRequest();
    client.open('GET', url);
    client.onreadystatechange = function() {
      document.getElementById(elementId).innerHTML = client.responseText;
    }
    client.send();
}

Now you can call this twice, every second:

var interval = setInterval(function(){
                             loadFile('file:///Users/trevor/Desktop/x.txt', 'xp');
                             loadFile('file:///Users/trevor/Desktop/y.txt', 'yp');
                           },1000);

Some notes:

This may work from your local computer, but will not work on all browsers, and definitely not work once (/if) the page is on a server.
Since the calls are asynchronous, it is possible the response to an old call will return after a newer one. You may want to keep old clients and cancel them.
If possible, an alternative is to use <iframe>s, and simple refresh them periodically.

edited Sep 19, 2011 at 5:10

answered Sep 19, 2011 at 4:25

Kobi

139k41 gold badges259 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trevor Rudolph Over a year ago

i like the idea... but i can't work it, heres a paste bin i made with data urls instead of files and p.s. i don't need to run this on a server its just for use on my computer

Kobi Over a year ago

@Trevor - Seems to be working for me (though I was missing a line of code): jsfiddle.net/VTkFm , so It's possible the problem is really the file// protocol.

Kobi Over a year ago

@Trevor - regarding the edit, here's an alternative using iframes: jsfiddle.net/fWnNU (you can use FireBug, for example, to see the images are reloaded every 5 seconds)

Collectives™ on Stack Overflow

read 2 text files with javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related