Member Avatar for omega1

hi all, i am trying to have the content of a txt file loaded in a page (which works), but this file changes on a regular basis and I need just the text to refreash, not the whole page, this is what I have... As mentioned, it correctly displayes the content of the .txt file, but from the code I have, I need it to refresh, any help would be greatly appreciated. Thank you in advance.

P.S. Only seems to work in IE at the moment, any advice on how to get it to work in FF would be greatly appreciated (in FF it just doesnt display the ocntent of the .txt file) Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style type="text/css">
<!--
.style1 {
	font-size: 1px;
	color: #e0e0e0;
}
.style2 {
	font-size: 10px;
	color: #e0e0e0;
}
.style3 {
	font-size: 9px;
	color: #000000;
}
-->
</style>
<script language="javascript">
function GetSong(){
var url = "CurrentSong.txt";
var xmlhttp=new ActiveXObject("microsoft.xmlhttp");
try {
xmlhttp.open("GET", url, false);
xmlhttp.send();
var data=xmlhttp.responsetext;
current.innerHTML=data;
} catch (e2) {
}
}
</script>
<script language="javascript">
function reloadIt()
{
GetSong();
setTimeout("reloadIt()",10000);
}
</script>
</head>
<body>

  <table width="598" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="468"><div id="title">Now Playing:</div><div id="current"></div><script language="JavaScript">reloadIt();</script> 

<br /></td>
      <td width="120" rowspan="2">
<script type="text/javascript">
insert_img();
</script>
</td>
    </tr>
  </table>
</body>
</html>
Edited by omega1 because: n/a
  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by omega1

Dani AI

Generated

Good instincts, . Two things are tripping you up: IE-only ActiveX and browser caching. As suggested, use a real XMLHttpRequest, make it async so the UI does not freeze, and bust the cache so you always see the newest text.

Drop this script in your page (after the element with id="current") and call startPolling() on load. It works in IE7+ and modern browsers.

<script>
  function startPolling() {
    const target = document.getElementById('current');

    function fetchSong() {
      var xhr = new XMLHttpRequest();
      // add a timestamp to avoid cached responses
      xhr.open('GET', 'CurrentSong.txt?t=' + Date.now(), true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // text file => use textContent
            target.textContent = xhr.responseText;
          } // else keep the previous value
        }
      };
      xhr.send(null);
    }

    fetchSong();                 // initial load
    setInterval(fetchSong, 10000); // refresh every 10s
  }

  // cross-browser onload
  if (window.addEventListener) window.addEventListener('load', startPolling, false);
  else if (window.attachEvent) window.attachEvent('onload', startPolling);
  else window.onload = startPolling;
</script>

How to get it working in Firefox:

  • Serve both the page and CurrentSong.txt over HTTP from the same host. Loading via file:// blocks XHR in most browsers. A quick local server is fine, e.g. in the folder with your files run: python -m http.server 8000 and open .
  • Keep the file on the same origin (same protocol, host, and port). Cross-domain requests will be blocked unless the server sends CORS headers.
  • If your server adds aggressive caching, keep the ?t=... query or configure Cache-Control: no-cache server-side.

This keeps the page intact and only updates the text, exactly what you want.

Recommended Answers

All 4 Replies

Member Avatar for gumape

hi omega, some suggestions:
- use the XMLHttpRequest object instead of the ActiveXObject. The ActiveXObject is only supported by IE while the XMLHttpRequest object is cross-browser
- if you want to call the GetSong method periodically, you can use the setInterval method instead of the setTimeout method
- call the setInterval method when the page has been loaded.

Here is an example how to implement:

<head>
	<script type="text/javascript">	
		function GetSong () {
			var url = "CurrentSong.txt";
			var xmlhttp = new XMLHttpRequest;
			xmlhttp.open ("GET", url, false);    // synchron
			xmlhttp.send (null);

			var data = xmlhttp.responsetext;
			current.innerHTML=data;
		}

		function Init () {
			GetSong ();
			setInterval (GetSong, 10000);
		}
	</script>
</head>
<body onload="Init ()">
	...
</body>
Edited by gumape because: n/a
Member Avatar for gumape

P.S.

the third parameter of the open method specifies whether the request needs to be handled asynchronously or not.
If it is true, the send method returns immediately. In that case, use the onreadystatechange event to be notified about the states of the request.
If it is false, the send method does not return, while the operation is in progress. Do not use this value if you do not want to keep the user waiting.

For further details and examples, see the following pages:

,
,
,
,

Member Avatar for omega1

thanks i'll try this

Member Avatar for omega1

hi, thank you very much for replying, and my apologies for lack of understanding, but i have no idea how to implement this, how do i call it? thank you for your patience

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.