“rotating” / switching text from text document javascript?
Question
I'm trying to pull the text from a text document and then split it so the first part before the "~" gets displayed in one div and then the rest gets added to the other div also it switches out the text so it first display the first row from the text document then after 5 sec it goes to row 2 etc and when it have display the last row it loops back to row one.
Hopes it makes sense, It might be a problem with the JSFiddle code because of same-origin policy for the text document but I have tried it on my server and it don't work there either.
What am I missing here?
Code example: JSFiddle
Inside the text document:
0.001TXT~Example text 01
0.002TXT~Example text 02
0.003TXT~Example text 03
0.004TXT~Example text 04
0.005TXT~Example text 05
0.006TXT~Example text 06
HTML:
<body>
<div id="numbers01">0.000</div>
<div id="text01">text</div>
</body>
Javascript :
$(document).ready(function () {
var lines = "";
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
});
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
Thanks in advance.
2 answers
solution1
2 ACCPTED 2014-02-07 19:54:23
I don't have a complete answer yet but something to work with now, as JS calls are asynchrone by default, the code below is run before the data is even received. By moving the code inside the callback should fix your first problem.
$(document).ready(function () {
var lines, i = 0;
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
});
});
Like that, it's much better but I couldn't get it to work yet. Anyway as it still doesn't work yet... I decided to move to the more convenient ajax method like that. I added an error handler... I believe that you're server might be blocking ajax requests as I'm receiving empty bodies. If I load the url without ajax, it loads the file.
$(document).ready(function () {
var lines, i = 0;
$.ajax("http://www.patan77.com/example_text.txt", {
dataType: "text",
success: function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
},
error: function (xhr, error, errorThrown) {
console.log(error + " " + errorThrown);
}
});
});
Since I can't load the data, I did a small jsfiddle and mocked the data here
The problem was located on that line:
if (i <= lines.length) {
Instead of
if (i < lines.length) {
solution2
2 2014-02-07 19:55:50
Put the whole code inside your $.get callback
$(document).ready(function () {
$.get("http://www.patan77.com/example_text.txt", function (data) {
var lines = data.split("\n");
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
});
Otherwise the window.setInterval function will be called while "lines" has not been filled yet due to jQuery AJAX function being asynchronous.
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.