javascript - Loading external text to HTML -
for project here @ work have create file several chapters , lot of text in 1 big html file, since text has translated different languages, want load text external text file.
i've seen topics like:
- loading external text .txt html file
- jquery load txt file .html()
but can't manage make work.
as test created basic html file:
<html> <head> <script type="text/javascript"> $('#text').load("/textdoc.txt"); </script> </head> <body> <div id="text"> </div> </body>
but doesn't work. expected see text within "textdoc.txt" file in <div id="text"> </div>
. remains blank. text document in same directory html file. doing wrong here?
as side note, system create file runs on ie7. work that?
as mrn00b noted, assuming have left out inclusion of jquery js file itself? please include it, if have not already, not implicitly part of web page.
as code precedes item in document references (id="text")
, need wait document complete loading:
use 1 of these jquery wait dom finish loading:
traditional:
$(document).ready(function(){ $('#text').load("/textdoc.txt"); });
shortcut:
$(function(){ $('#text').load("/textdoc.txt"); });
safe (locally scoped $):
jquery(function($){ $('#text').load("/textdoc.txt"); });
note: this looks bit iife (immediately invoked function expression) might see, isn't.
the following execute code scoped $
, not wait loading.
(function($){ // still run iife! $('#text').load("/textdoc.txt"); })(jquery);
e.g.:
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> jquery(function($){ $('#text').load("/textdoc.txt"); }); </script> </head> <body> <div id="text"> </div> </body>
or, worst case, put code @ end of body
element instead of in head
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <div id="text"> </div> <script type="text/javascript"> // work element referenced must loaded $('#text').load("/textdoc.txt"); </script> </body>
Comments
Post a Comment