Reputation: 5769

Auto refresh a webpage on content update only

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>&nbsp;</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>&#163;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>

Upvotes: 4

Answers (3)

WebsterDevelopine

Reputation: 117

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();

    });   

}

Upvotes: 5

HILARUDEEN S ALLAUDEEN

Reputation: 1752

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.

Upvotes: 4

jj689

Reputation: 456

A good solution would be to use javascript and make ajax calls at set intervals. Then update whatever element with new content from your response. This way you won't have to deal with refreshes which would be very annoying.

Upvotes: 3

Auto refresh a webpage on content update only

Answers (3)

Related Questions