javascript - How to load local text information into <div> section -


i trying draw diagram using below codes. works well. can see, should put text information in div. if there sample.txt includes information in local drive, can load div section dynamically instead of putting 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 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> 

add file-input element 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); } 

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -