Potrzebuję zrobić coś na wzór wyświetlania logu na stronie. Do DIVa lub np TEXTAREA ma być wczytywana zawartość pliku z serwera, który się zmienia.
Znalazłem gotowe rozwiązanie, które jest wprost idealne dla moich potrzeb, ale niestety skrypt z bliżej nie określonych przyczyn nie chce działać. Nie wyświetlają się żadne błędy, nie ma błędów konsoli JS, no i też nic się nie wyświetla
Czy ktoś ma może pomysł jak napawić ten skrypt, o ile jest z nim coś nie tak, albo jak go zmusić do tego żeby działał?
index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/> <meta http-equiv="EXPIRES" content="01 Jan 1970 00:00:00 GMT"/> <meta http-equiv="PRAGMA" content="NO-CACHE"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.logviewer.js"></script> <script type="text/javascript"> jQuery(document).bind("ready", function() {
jQuery('#logcontent').logViewer({logUrl: 'testFile.txt'},{refreshtimeout: '100'});
});
<body style="width: 100%; font-family: Verdana"> <h1>Simple log viewer test page
</h1> <div>Shows file content in a web browes it is very useful for watching a live logs without to load entire file.
Log viewer needs real web server to operate. It uses ajax to get new file content's WITHOUT to fetch entire file every time.
This is done with HEAD request to get file's size and if it is bigger from previous one only these new bytes will be fetched from server and apended
to current log widnow
</div>Log viewer options:
<li>logUrl - web location of desired file
</li> <li>refreshtimeout - refresh interval in ms
</li> <li>readBytes - initional amount of bytes to fetch
</li> <li>callback - user function to call to modify new content if necessary before it is appended to log window.
This function will receive new content as single argument and must return it
</li><textarea id="logcontent" WRAP="off" style="width: 50%; height: 20%;" autocomplete="off">
jquery.logviewer.js
(function(jQuery){
var logViewer = function (options) {
doLVHead = function(id) {
jQuery.ajax({type: "HEAD",
url: logViewer.options.logUrl,
cache: false,
complete: function(xhr, textStatus) {
if (textStatus == "success") {
var newLenght = parseInt(xhr.getResponseHeader("Content-Length"));
checkLVLength(newLenght);
}
}
});
},
checkLVLength = function (newLenght){
if (logViewer.curLenght != newLenght) {
if (logViewer.curLenght > newLenght) {
logViewer.curLenght = 0;
jQuery("#" + logViewer.options.targetObjectID).append('\nReseting ... \n');
}
var getBytes = logViewer.curLenght;
var readBytes = parseInt(logViewer.options.readBytes);
if (logViewer.curLenght == 0 && newLenght > readBytes) {
getBytes = newLenght - readBytes;
} else if (logViewer.curLenght > 0) {
getBytes--;
}
jQuery.ajax({type: "GET",
url: logViewer.options.logUrl,
cache: false,
success: function(data) {
data = logViewer.options.callback.call(this, data);
jQuery("#" + logViewer.options.targetObjectID).append(cleanLVtags(data));
var objDiv = document.getElementById(logViewer.options.targetObjectID);
objDiv.scrollTop = objDiv.scrollHeight;
},
beforeSend: function(http){
http.setRequestHeader('Range', 'bytes='+getBytes+'-');
}
});
}
logViewer.curLenght = newLenght;
setMyTimeOut();
},
setMyTimeOut = function(){
if (logViewer.timeoutID > 0) {
window.clearTimeout(logViewer.timeoutID);
}
logViewer.timeoutID = window.setTimeout(doLVHead, logViewer.options.refreshtimeout);
},
cleanLVtags = function(html) {
//if (typeof(html) == 'string'){
//return html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
//} else {
return html;
//}
};
return { init: function(options) {
if (!options ) var options = {};
if (options.logUrl == undefined ) {
alert('Log URL missing');
return false;
}
if (options.refreshtimeout == undefined ) options.refreshtimeout = '2000';
if (options.readBytes == undefined ) options.readBytes = 10000;
if (options.callback == undefined ) options.callback = function(data){ return data;};
options.targetObjectID = jQuery(this).attr('id');
logViewer.options = options;
logViewer.curLenght = 0;
logViewer.curLenght = 0;
doLVHead();
}
};
}();
jQuery.fn.extend({
logViewer: logViewer.init
});
})(jQuery)
[AJAX][HTML][JavaScript]Ładowanie pliku txt do DIV i odświeżanie go
9.11.2013, 23:54:33
