0

I have the following code which allows a user to pick a text file and then it loads the contents into the PRE tag below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Load text file</title>
    <script type="text/javascript">
  function readText(that){
   if(that.files && that.files[0]){
    var reader = new FileReader();
    reader.onload = function (e) {
     var contents = e.target.result;//.replace("\r\n","<br/>");
     contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
     document.getElementById('board').innerHTML= contents;
    };//end onload()
    reader.readAsText(that.files[0]);
   }//end if html5 filelist support
  } 
    </script>
  </head>
  <body>

<input type="file" onchange='readText(this)' />  <hr />

<pre id="board" contenteditable = "true">
This is where the text from the chosen text file will be loaded.
</pre>

</body>
</html>

Is it possible to read the contents of the chosen file every 10 seconds?

For example the user chooses the text file (once). Then the code loops and re-reads the contents and updates the PRE tag with any changes that may have been made to the text file.

I am working locally so any server scripting is not possible.

I have a feeling the solution might involve a SETINTERVAL?

Thanks in davance.

jmcall10
  • 127
  • 1
  • 9

1 Answers1

0

You can use

// A variable to store the id of the setInterval method
var currentIntervalId = undefined;
// The function that calls your method.
var startOrRestart = function(that) {
    // Clear the 'old' calls to avoid wrong behavior
    if (currentIntervalId !== undefined) clearInterval(currentIntervalId);
    readText(that); // For executing immediately
    // Execute it readText each 10 seconds
    currentIntervalId = setInterval(function() { readText(that); }, 10000);
};

and in your input tag you call

<input type="file" onchange='startOrRestart(this)' />

The idea of this solution is that you execute your readText(that) function once and after each 10 seconds (with the help of the setInverval function). However, if the text changes, the setInterval function is executed again. So, you have an old 'trigger' which handles the 'old' input; and you have a new 'trigger' for the new input. To avoid this undesired behavior, we store the id of the trigger and kill the trigger if set.

Guybrush
  • 710
  • 7
  • 12
  • Hi thanks for the response. I am unable to get this code to work however. Are you able to provide some more assistance? Thanks – jmcall10 Apr 05 '17 at 08:01
  • Put the javascript in your script tag. Furthermore, switch _onchange='readText(this)'_ to _onchange='startOrRestart(this)'_. Is there any failure output? – Guybrush Apr 05 '17 at 08:12
  • Ok initially I created a new script tag within the body however I have pasted your JS in the original script tag and changed the onchange. This works in chrome but not in IE or FF. – jmcall10 Apr 05 '17 at 08:18
  • Is there some failure output in IE or FF? – Guybrush Apr 05 '17 at 08:19
  • 1
    This is the error from FF but this happens as soon as the page loads. "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." No console errors in IE. – jmcall10 Apr 05 '17 at 08:21
  • Unfortunately, I see not an error. I've tested the solution on FF and it works. I tried a simple _var readText = function(that) { console.log(that); };_ and if I call _startOrRestart("Hello World");_ the _readText_ function is read immediately and after an interval of 10 seconds. – Guybrush Apr 05 '17 at 08:24
  • Now, I see your error. But that seems to be a encoding error. Maybe an error of the _readText_ function? My solution focuses only on the intervalled execution of _readText_ not on the content of _readText_ itself. – Guybrush Apr 05 '17 at 08:26
  • Ok thanks for your help. Are you able to post the full code that you got to work in FF? Did you alter the text file and the changes display in the log? – jmcall10 Apr 05 '17 at 08:28
  • I just took a FF, add an input-tag on an arbitrary page and set the _onchange_ attribute. Afterwards, I add my script with a simple _function readText(that) { console.log(that); }_ in the console of the FF. When I change the text in the input field, the text is printed in the console immediately and after 10 seconds, 20 ... – Guybrush Apr 05 '17 at 08:37
  • Ok once again thanks for the assistance. I will create a new post on how to get mine working on FF and IE. Regards jmcall10 – jmcall10 Apr 05 '17 at 08:49