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
Post a Comment