It's been a while since I tried my hand at HTML - and I'm getting stumped - hopefully someone can come to my aid.
My goal: On my LOGIN page, I want to add an "outage" notification section. I don't want the admins to access the login.html file; I want the data to be grabbed from a text file.
My attempt: I created an "outage.txt" file which is scheduled to update the webserver every morning. I then use a DIV and OBJ to load the "outage.txt" file. This does work.
<table><tr><td>
<div id="outage"><object width=475 data="outage.txt"></object></div>
</td></tr></table>
My problem: When I update my "outage.txt" file and refresh the page, the data is NOT reflected on the page. The only way I can get it to load correctly is to do a force-refresh (ctrl-F5).
What I tried:
-) I added meta data to not use cache. But it still does not update my data.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
-) I've changed my txt pull to JQUERY. It pulls the data nicely - but still does not update it.
$.get( "outage.txt", function( data ) {
Need help: At this point I'm not sure what to ask help for. Is there a better way to grab a text file and display it on the page? How to I ensure that the page is being correctly loaded and not pulled from cache. Is there a way to FORCE the page to force-refresh?
When I do a refresh (Ctl-R) on my Chrome, it updates the text. Try:
window.onload = function() {
document.getElementById("objid").data = "outage.txt";
}
<object id="objid" width=475 data="outage.txt">
I have my answer and will do my best to summarize it here.
Looks like the browser sees the data="outage.txt" file and says 'Hey! I already have this in cache, no need to grab a file again'. The trick is to force a change to the filename which tells the browser that 'This is a new file, please load it no matter what'.
<div id="outage"><object id="outageid" width=475></object></div>
<script type="text/javascript">
document.getElementById("outageid").data = "outage.txt?" + Math.floor(Math.random() * 100);
</script>