How to load local text information into
section

Question

I am trying to draw a diagram by using below codes. It works well. As you can see, I should put some text information in the div. If there is a sample.txt which includes this information in local drive, can I load it into div section dynamically instead of putting it manually?

 <!DOCTYPE html>
 <html >
   <head>
     <meta charset="UTF-8">
     <title>Sample Diagram</title>
   </head>
   <body>
     <div class="diagram">
     Title: Diagram
  <!--   Participant FIRST
     Participant SECOND
     Participant D  
    Participant F
    Participant G     //--> 
    E->F: 2
     SECOND->FIRST: 1
     FIRST->SECOND: 1
     C-->SECOND: Request token
    C->E: 2
     SECOND->FIRST: Forward request
     FIRST->>C: Send token
     </div>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>
     <script src="js/index.js"></script>
   </body>
 </html>

UPDATE

/test/index.html
/test/js/index.js
/test/js/sample.txt
/test/sample.txt

index.js

// js-sequence-diagrams by bramp <http://bramp.github.io/js-sequence-diagrams/>
$(".diagram").sequenceDiagram({theme: 'simple'});
$(function(){
 $.get("sample.txt", function(data) {
     $(".diagram").text(data);
 });
});

sample.txt

Title: Diagram
SECOND->FIRST: 1
FIRST->SECOND: 1
C-->SECOND: Request token
C->E: 1
SECOND->FIRST: Forward request
FIRST->>C: Send token

Without inner text

 <!DOCTYPE html>
 <html >
   <head>
     <meta charset="UTF-8">
     <title>Sample Diagram</title>
   </head>
   <body>
     <div class="diagram">

     </div>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>

     <script src="js/index.js"></script>

   </body>
 </html>

`$('.diagram').text()` ? and by the way what do you mean by `local file`? File that was selected to upload or what? — Magesh Kumaar, Aug 08 '16 at 07:47
Possible duplicate of [How do I load the contents of a text file into a javascript variable?](http://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable) — Vicente Olivert Riera, Aug 08 '16 at 07:53
@Magesh Kumaar. There is a sample.txt in my local pc. Thanks. — Sigularity, Aug 08 '16 at 08:06
Here is a similar question: [Reading client side text file using Javascript](https://stackoverflow.com/questions/4950567/reading-client-side-text-file-using-javascript#4950836) — TuringTux, Aug 08 '16 at 12:08

score 2 · Answer 1 · edited Aug 08 '16 at 12:44

2

Add a file-input element to the HTML page:

<input type="file" id="file" onchange="readTxT()"/>

And select sample.txt manually:

function readTxT(){
  var reader = new FileReader();
  var files=document.getElementById('file').files;
  var f = files[0];
  reader.onload = function(e) {
    var text = reader.result;
    $(".diagram").text(text).sequenceDiagram({theme: 'simple'});
  }
  reader.readAsText(f);
}

edited Aug 08 '16 at 12:44

TuringTux

559
1
12
26

answered Aug 08 '16 at 08:01

lx1412

1,160
6
14

As far as I know, this is the only possible way to load a file client-side. +1 – TuringTux Aug 08 '16 at 13:02

TuringTux · Answer 2 · 2016-08-08T13:03:06.380

1

If the sample.txt is available on the (http) server the site is hosted with (may be localhost), yes.

Assuming your directory structure is like this (/var/www/ is the server's root directory in my example):

/var/www/
- index.html (The file without the diagram content)
- sample.txt
- js/
  - index.js

Place this in your index.js:

window.onload = function() {
  $.get("sample.txt", function(data) {
     $(".diagram").text(data).sequenceDiagram({theme: 'simple'});
  });  
}

If you're not using any HTTP server, you can't load files from the file system directly - that's part of the Javascript sandbox (security concept).

I would then recommend using something like in lx1412's answer, a manual file chooser is the only way how this could work then.

I've tested the script above using Firefox and an HTTP server; and my edit of lx1412's answer using Firefox without an HTTP server.

edited Aug 08 '16 at 13:03

answered Aug 08 '16 at 07:50

TuringTux

559
1
12
26

There is a sample.txt in my local pc, and I am testing this one without any http server. With putting text manually, it works but I don't see anything in browser with your solution. -.-. Thanks. – Sigularity Aug 08 '16 at 08:05
Okay, thanks. I've made a mistake, I'll correct and clarify my answer. – TuringTux Aug 08 '16 at 11:50
I see the Browse button so choose the file manually but it doesn't show the diagram. I might generate the whole html contents in GUI application. Thanks for your help. – Sigularity Aug 09 '16 at 01:03
@Sigularity What does the error log (inspector) say? – TuringTux Aug 09 '16 at 08:07
Sorry for late response. It just says "Syntax error" on the first line(of HTML) without other things. Thanks. – Sigularity Aug 16 '16 at 01:09

M.Tanzil · Answer 3 · 2016-08-08T08:43:18.967

1

The simplest and easy way is to make get request to the server. And for that you have to use jQuery $.get function. Which will make a request for you.

Here is reference to jQuery.get()

USAGE

// make sure the PATH is correct for `sample.txt`    
// $.get(your URL to the file, callback function)

$(function(){
 $.get("sample.txt", function(data) {
     $(".diagram").text(data);
 });
});

edited Aug 08 '16 at 08:43

answered Aug 08 '16 at 08:07

M.Tanzil

1,987
1
12
28

sample.txt should be in http server? I am just testing this stuff on my local pc without that server. Thanks. – Sigularity Aug 08 '16 at 08:10
I updated the Question. Apparently, there is a sample.txt but it doesn't work. – Sigularity Aug 08 '16 at 08:36
The paths are ok now, but are you wrapping the code in `ready function`, i updated my answer try that. – M.Tanzil Aug 08 '16 at 08:44
On code inspection in browser, I see 'syntaxt error' on index.html(first line) and sample.txt(first line). I am not sure what is wrong. Thank you. – Sigularity Aug 08 '16 at 08:50
@Sigularity: I also see these errors, but only when opening this file directly (not via a server). I think you can safely ignore this. – TuringTux Aug 08 '16 at 12:10
@Sigularity may be you are testing in local but after all your project has to be uploaded to the server, right ? Then why you're not using a local server ? What you are doing not using a server is a bad practice, I would rather say that :-) hope you got my point. – M.Tanzil Aug 08 '16 at 13:30
No. I'm trying to draw a diagram on my windows application which provides a HTMLViewer so without any HTTP server, I can draw a JavaScript diagram, and that is my purpose. Thanks for the advice. – Sigularity Aug 08 '16 at 14:34

How to load local text information into section

UPDATE

index.js

sample.txt

Without inner text

3 Answers3

How to load local text information into
section