Menu
I have created a webpage on my website which gets content updates every 1-60 mins (random/varies) and at first I made the webpage auto refresh using:
<meta http-equiv="refresh" content="30" >
However, this is very annoying when scrolling and just generally using the webpage.
I thought about using an iframe on a separate webpage like so:
<iframe src="output.html" width="2500" height="10000" frameborder="0" allowfullscreen></iframe>
However, again this throws up more problems with it not refreshing (if I remove the meta tags) and my original webpage height varies depending on how much data is on the page.
I'm looking for some advice / code help to get a way to only refresh the main webpage if the content is updated. (It doesn't matter if a suggested solution is in HTML, PHP or any other language)
Any suggestions or constructive comments would be greatly appreciated.
Thanks in advance
- Hyflex
EDIT:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5" >
<title>data data data data data</title>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table id="gradle" summary="main">
<thead>
<tr>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data Odds</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">AV10</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">Age</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
</tr>
</thead>
<tbody>
<tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td> </td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>£45552.43</td><td></td><td>data</td><td>data</td><tr>
</tbody>
</table>
</body>
</html>
Closest I've got thanks to a post below is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
update_content()
$(document).ready(function (e)
{
var refresher = setInterval("update_content();", 250);
})
function update_content()
{
$.ajax(
{
type: "GET",
url: "output.html",
timeout: 10000,
cache: false,
})
.done(function (page_html)
{
var newDoc = document.documentElement.innerHTML;
if (page_html != newDoc)
{
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
}
});
}
</script>
713
http://jsfiddle.net/Ask3C/
You will have to replace the path to the one of your page. Should rewrite the document every 30 seconds. It is a bit of a hack approach but if you are still using Meta Refresh - it is light years better. Give it a go. The script for jQuery library is just pulling from Google repository.
$(document).ready(function(e) {
var refresher = setInterval("update_content();",30000); // 30 seconds
})
function update_content(){
$.ajax({
type: "GET",
url: "index.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}
Your problem is very common. Have you explored how twitter like feed update is working?. You have to do as follows
var interval = function() {
setTimeout(function() {
$.ajax({
// Ajax options goes here
success : function(data) {
// Process Data
// Generate HTML
// Insert Generated HTML whereever you want in document
interval() //Initiate next fetch
}
})
}, 1000 // Interval time
);
};
Note: Here I am using jQuery ajax.
Hopefully this will give an idea.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
