how can I get text strings from list in txt document?
Question
how would I do if I wanted to have an div on my site that contained a text and I wanted to replace that text every 5sec with a new text string that It got from an list from an external text file.
So something like this but in the "textlist" div it puts the first sting from the text file then 5 sec after it replaces that with the text from the second row, and so on.
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function run() {
document.getElementById("textlist").innerHTML = "The sting from the text file";
}
window.setInterval(run,5000);
</script>
</head>
<body>
<div id="textlist">the text</div>
</body>
</html>
and the text file would be like this for example:
/mytextfile.txt
(content in the file)
01: The tips 1
02: The tips 2
03: The tips 3
04: The tips 4
05: The tips 5
06: The tips 6
Thanks in advance hopes it make sense.
2 answers
solution1
4 2013-12-31 21:26:22
I'd do that a little differently:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
</head>
<body>
<div id="textlist">the text</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var ajax = $.ajax({
url: 'the url to the text list',
type: 'GET'
});
ajax.done(function (data) {
var list = $.trim(data).split(/\n+/), index = 0;
function run() {
if (index >= list.length) {
index = 0;
}
$('#textlist').html(list[index]);
index ++;
}
window.setInterval(run, 5000);
});
});
</script>
</body>
</html>
So in this example, we first move all of the scripts to the bottom of the body. That way we can be sure that our html has been rendered before the scripts run.
Secondly, we put our custom JavaScript into a jQuery docready. This way we are being extra safe that the page is fully interactive before our scripts try to run.
The next thing we do is use ajax to fetch the text file. Due to same-origin policy, this will only work if that file resides on the same server that is serving the web page.
After that, we attach a handler to the ajax promise. In other words, when the ajax request is "done", it will run a function and pass in the data that was retrieved. We turn the data into a list by trimming white space off the string and splitting it wherever there are new lines. We also set up a variable to track our place in the list.
The run function will check to see what place we are at in the list. If we've gone farther than the amount of items in the list, we'll reset it to 0. Then we'll replace the html of our element with the current list item. Finally we move up one place in the list.
Lastly we call setInterval so that run will run once every 5 seconds.
Caveat: I haven't tested this but conceptually it will work. There may be a typo or perhaps some specific ajax requirements I'm not aware of having to do with your server but the process I've described should work.
solution2
2 ACCPTED 2013-12-31 20:58:57
you can use ajax for that.with jquery (that is already attached to your document) you can easily do that as follow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var lines="";
$.get( "your_text_file_path", function( data ) {
lines=data.split("\n");
});
var i=0;
window.setInterval(function (){
if(i<=lines.length){
$("#textlist").html(lines[i]);
i++;
}else{
i=0;
}
},5000);
</script>
</head>
<body>
<div id="textlist">the text</div>
</body>
</html>
here you are a demo does that
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.