Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][HTML][JavaScript]Ładowanie pliku txt do DIV i odświeżanie go
Forum PHP.pl > Forum > Przedszkole
alex19
9.11.2013, 23:54:33
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 sad.gif

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
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
  5. <meta http-equiv="EXPIRES" content="01 Jan 1970 00:00:00 GMT"/>
  6. <meta http-equiv="PRAGMA" content="NO-CACHE"/>
  7.  
  8. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  9. <script type="text/javascript" src="jquery.logviewer.js"></script>
  10. <script type="text/javascript">
  11. jQuery(document).bind("ready", function() {
  12.      jQuery('#logcontent').logViewer({logUrl: 'testFile.txt'},{refreshtimeout: '100'});
  13. });
  14. </script>
  15.  
  16. </head>
  17.  
  18. <body style="width: 100%; font-family: Verdana">
  19. <h1>Simple log viewer test page</h1>
  20. <div>Shows file content in a web browes it is very useful for watching a live logs without to load entire file.
  21. Log viewer needs real web server to operate. It uses ajax to get new file content's WITHOUT to fetch entire file every time.
  22. 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
  23. to current log widnow</div>
  24. <br/>
  25. Log viewer options:
  26. <ul style="margin: 0">
  27.   <li>logUrl - web location of desired file</li>
  28.   <li>refreshtimeout - refresh interval in ms</li>
  29.   <li>readBytes - initional amount of bytes to fetch</li>
  30.   <li>callback - user function to call to modify new content if necessary before it is appended to log window. 
  31.         This function will receive new content as single argument and must return it</li>
  32. </ul>
  33. <br/>
  34. Live log:<br/>
  35. <textarea id="logcontent" WRAP="off" style="width: 50%; height: 20%;" autocomplete="off">
  36.  
  37. </textarea>
  38.  
  39. </body>
  40. </html>
[HTML] pobierz, plaintext


jquery.logviewer.js
[JAVASCRIPT] pobierz, plaintext 
  1. (function(jQuery){
  2.  
  3. 	var logViewer = function (options) {
  4.  
  5. 		doLVHead = function(id) {
  6. 			jQuery.ajax({type: "HEAD",
  7. 				url: logViewer.options.logUrl,
  8. 				cache: false,
  9. 				complete: function(xhr, textStatus) {
  10. 					if (textStatus == "success") {
  11. 						  var newLenght = parseInt(xhr.getResponseHeader("Content-Length")); 
  12. 						  checkLVLength(newLenght);
  13. 					} 
  14. 				}
  15. 			});
  16. 		},
  17.  
  18. 		checkLVLength = function (newLenght){
  19. 			if (logViewer.curLenght != newLenght) {
  20. 			    if (logViewer.curLenght > newLenght) {
  21. 				    logViewer.curLenght = 0;
  22. 					jQuery("#" + logViewer.options.targetObjectID).append('\nReseting ... \n');
  23. 				}
  24. 				var getBytes = logViewer.curLenght;
  25. 				var readBytes = parseInt(logViewer.options.readBytes);
  26.  
  27. 				if (logViewer.curLenght == 0 && newLenght > readBytes) {
  28. 					getBytes = newLenght - readBytes;
  29. 				} else if (logViewer.curLenght > 0) {
  30. 					getBytes--;
  31. 				}
  32.  
  33. 				jQuery.ajax({type: "GET",
  34. 					url: logViewer.options.logUrl,
  35. 					cache: false,
  36. 					success: function(data) {
  37. 					    data = logViewer.options.callback.call(this, data);
  38. 						jQuery("#" + logViewer.options.targetObjectID).append(cleanLVtags(data));
  39. 						var objDiv = document.getElementById(logViewer.options.targetObjectID);
  40. 						objDiv.scrollTop = objDiv.scrollHeight;  
  41. 					},
  42. 					beforeSend: function(http){
  43. 						http.setRequestHeader('Range', 'bytes='+getBytes+'-');
  44. 					}
  45. 				});
  46. 			}
  47. 			logViewer.curLenght = newLenght; 
  48. 			setMyTimeOut();
  49. 		},
  50.  
  51. 		setMyTimeOut = function(){
  52. 			if (logViewer.timeoutID > 0) {
  53. 				window.clearTimeout(logViewer.timeoutID);
  54. 			}
  55. 			logViewer.timeoutID = window.setTimeout(doLVHead, logViewer.options.refreshtimeout);
  56. 		},		 
  57.  
  58. 		cleanLVtags = function(html) {
  59. 		    //if (typeof(html) == 'string'){
  60. 			    //return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  61. 			//} else {
  62. 			    return html;
  63. 			//}
  64. 		};
  65.  
  66. 		return { init: function(options) {
  67. 				if (!options ) var options = {};
  68. 				if (options.logUrl == undefined ) {
  69. 					alert('Log URL missing');
  70. 					return false;
  71. 				}
  72. 				if (options.refreshtimeout == undefined ) options.refreshtimeout = '2000';
  73. 				if (options.readBytes == undefined ) options.readBytes = 10000;
  74. 				if (options.callback == undefined ) options.callback = function(data){ return data;};
  75.  
  76. 				options.targetObjectID = jQuery(this).attr('id');
  77.  
  78. 				logViewer.options = options;
  79. 				logViewer.curLenght = 0;
  80.                 logViewer.curLenght = 0;
  81.  
  82. 				doLVHead();
  83. 			}
  84. 		};		
  85.   }();
  86.   jQuery.fn.extend({
  87. 	logViewer: logViewer.init
  88.   });
  89. })(jQuery)
  90.  
[JAVASCRIPT] pobierz, plaintext
com
11.11.2013, 01:39:35
Może to sie przyda:
http://lumino.us.com/index.php/2011/11/usi...ent-log-viewer/

Napisane po stary JQuery zmieni na: 
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.7.js"></script>
[HTML] pobierz, plaintext

To zadziała smile.gif
alex19
11.11.2013, 12:31:10
Cytat(com @ 11.11.2013, 01:39:35 ) *
Może to sie przyda:
http://lumino.us.com/index.php/2011/11/usi...ent-log-viewer/

To jest fajne, ale troche zbyt skomplikowane.

Cytat(com @ 11.11.2013, 01:39:35 ) *
Napisane po stary JQuery zmieni na: 
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.7.js"></script>
[HTML] pobierz, plaintext

To zadziała smile.gif

Działa o tyle, że ładuje teraz plik do textarea, ale go nie odświeża.
Czy można to jakoś przerobić na "nowe jQuery", bo w jendym html satre i nowe jQuery, to chyba nie za bardzo będzie działać?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.