Monday, March 18, 2013

Automatically Refresh Page Using Java Script

In game sites, you will have to see that they updated the score in regular time intervals automatically. i.e refreshed the score card in regular time intervals. Are you want this functionality in your web page? If yes then this post will help you.
Here I am going to show you a simple example to refresh the page automatically in regular intervals using Java Script or Meta Tag.

In previous posts, I explained How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net and some other articles related to jQuery, Java Script etc.

Using Java Script


In Java Script , you can refresh the page using document.location.reload() method. But refreshing the page automatically you will have to use setTimeout() method to invoke location.reload() method in regular time intervals.To implement this you need to write the code like as shown below-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoRefresh.aspx.cs" Inherits="TestOCRReader.AutoRefresh" %>

<!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 runat="server">
    <title>Auto Refresh the Page</title>
    <script type="text/javascript">
        function autoRefresh() {
            //Reload the page
            document.location.reload(true);
        }
    </script>
</head>
<!--Call call the setTimeout() on body onload event -->
<body onload="javascript:setTimeout(autoRefresh,5000);">
    <form id="form1" runat="server">
    <div>
    <%=DateTime.Now %>
    </div>
    </form>
</body>
</html>

In the above code, I have passed "true" in document.location.reload() method because "true" force the reloaded page to come from the server (instead of cache). Alternatively, you can use the "false" keyword to reload the page from the cache.

 

Using Meta Tag


You can also achieve this functionality using Meta Tag. Just write the following line into head section of page.

<!-- To refresh the page in every 30 seconds -->
<meta http-equiv="refresh" content="30" />

I hope this article will be helpful for you. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.

No comments:

Post a Comment

^ Scroll to Top