asked on

Refresh my page

How do I make my page to have two links saying:

Refresh on Refresh off

and by clicking one another refresh is either on or off.

Right now it refreshes all the time.

<!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="REFRESH" content="5; charset=utf-8" />
<title>Welcome to Galop BuildServer</title>


<style type="text/css">
	#header {
	clear: left;
	width: 100%;

        }

	#sidebar{
	float: left;
	height: 500px;
	width: 15%;

        }

	#main{
	float: left;
	height: 500px;
	width: 74%;

        }

	#footer{
	clear: both;
	width: 100%;

        }       

        #container {
                border: 1px solid #cccccc;
                width: 932px;
        }

        #headerrow {
                background-color: #eeeeee;
                font-weight: bold;
                
                
        }

        .col1, .col2, .col3 {
                display: inline;
                position: relative;
                padding: 15px;
                vertical-align: middle;
                text-align: left;                
        }

        .col1 {
                width: 260px;
        }

        .col2 {
                width: 1300px;
        }
        .col3 {
                width: 1150px;
        }

        .clearfix {
                clear: both;
        }

        A.ssmItems:link		{color:black;text-decoration:none;}
        A.ssmItems:hover	{color:black;text-decoration:none;}
        A.ssmItems:active	{color:black;text-decoration:none;}
        A.ssmItems:visited	{color:black;text-decoration:none;}


</style>

</head>







<body>

<div id="header">
	<%@include file='header.jsp'%>
</div> <!--end header-->

<div id="sidebar">
	<%@include file='sidebar.jsp'%>
</div><!--end sidebar-->

<div id="main">
	<%@include file='introduction_1.jsp'%>
</div><!--end main-->

<div id="footer">
	<%@include file='footer.jsp'%>
</div><!--end footer-->
</body>
</html>

Open in new window

anilallewar

What you could do is something like this for providing links.

<a href="Whatever your link is">Refresh now</a>
<a href="#">Refresh off</a>

The other think that you could do is if the "Refresh off" is checked, programatically do NOT submit the form.

However there is no way to stop refresh through browser as a new request will be submitted everytime.

NurAzije

Use JS for refreshing the page, use set_timeout to call a JS function which refreshes the page by calling window.location. If you click on do not refresh you reset the timeout.

Take a look at:
http://www.w3schools.com/js/js_timing.asp

and
http://www.w3schools.com/jsref/met_loc_replace.asp

Mickeys

ASKER

Didnt understand.
Could you show in my code above?

anilallewar

Something like this will give auto-refresh capability to your page.

<!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="REFRESH" content="5; charset=utf-8" />
<title>Welcome to Galop BuildServer</title>
<script type="text/javascript">
function refresh()
  {
  window.location.href = "your path to current page";
  }
 var t;
var timer_is_on=0;

function timedRefresh()
{
t=setTimeout("refresh()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedRefresh();
  }
}

function stopRefresh()
{
clearTimeout(t);
timer_is_on=0;
}
</script>

<style type="text/css">
	#header {
	clear: left;
	width: 100%;

        }

	#sidebar{
	float: left;
	height: 500px;
	width: 15%;

        }

	#main{
	float: left;
	height: 500px;
	width: 74%;

        }

	#footer{
	clear: both;
	width: 100%;

        }       

        #container {
                border: 1px solid #cccccc;
                width: 932px;
        }

        #headerrow {
                background-color: #eeeeee;
                font-weight: bold;
                
                
        }

        .col1, .col2, .col3 {
                display: inline;
                position: relative;
                padding: 15px;
                vertical-align: middle;
                text-align: left;                
        }

        .col1 {
                width: 260px;
        }

        .col2 {
                width: 1300px;
        }
        .col3 {
                width: 1150px;
        }

        .clearfix {
                clear: both;
        }

        A.ssmItems:link		{color:black;text-decoration:none;}
        A.ssmItems:hover	{color:black;text-decoration:none;}
        A.ssmItems:active	{color:black;text-decoration:none;}
        A.ssmItems:visited	{color:black;text-decoration:none;}


</style>

</head>







<body>

<div id="header">
	<%@include file='header.jsp'%>
</div> <!--end header-->

<div id="sidebar">
	<%@include file='sidebar.jsp'%>
</div><!--end sidebar-->

<div id="main">
	<%@include file='introduction_1.jsp'%>
</div><!--end main-->

<div id="footer">
	<%@include file='footer.jsp'%>
</div><!--end footer-->
<input type="button" value="Refresh On" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Refresh Off" onClick="stopRefresh()">
</body>
</html>

Open in new window

Mickeys

ASKER

Hmmm nothing happens. Here is the code and a picture off the look.

If I press refresh on.......it wont start refreshing
If I put something in the text box for example 5 and press refresh nothing happens.

<!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" />
<title>Welcome to Galop BuildServer</title>

<script type="text/javascript">
function refresh()
  {
  window.location.href = "index.jsp";
  }
 var t;
var timer_is_on=0;

function timedRefresh()
{
t=setTimeout("refresh()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedRefresh();
  }
}

function stopRefresh()
{
clearTimeout(t);
timer_is_on=0;
}
</script>


<style type="text/css">
	#header {
	clear: left;
	width: 100%;

        }

	#sidebar{
	float: left;
	height: 500px;
	width: 15%;

        }

	#main{
	float: left;
	height: 500px;
	width: 74%;

        }

	#footer{
	clear: both;
	width: 100%;

        }       

        #container {
        width: 1250px;
        border: 1px solid #cccccc;
        display: inline-block;
        }
        .headerrow {
                background-color: #eeeeee;
                font-weight: bold;
        }
        .col1, .col2, .col3 {
                display: inline;
                position: relative;
                padding: 5px;
                vertical-align: middle;
                text-align: left;
                float: left;
        }
        .col1 {
                width: 60px;
        }
        .col2 {
                width: 300px;
        }
        .col3 {
                width: 150px;
        }



        A.ssmItems:link		{color:black;text-decoration:none;}
        A.ssmItems:hover	{color:black;text-decoration:none;}
        A.ssmItems:active	{color:black;text-decoration:none;}
        A.ssmItems:visited	{color:black;text-decoration:none;}


</style>

</head>



<body>

<div id="header">
	<%@include file='header.jsp'%>
</div> <!--end header-->

<div id="sidebar">
	<%@include file='sidebar.jsp'%>
</div><!--end sidebar-->

<div id="main">
	<%@include file='introduction_1.jsp'%>
</div><!--end main-->

<div id="footer">
	<%@include file='footer.jsp'%>
</div><!--end footer-->

<input type="button" value="Refresh On" onClick="doTimer()"/>
<input type="text" id="txt"/>
<input type="button" value="Refresh Off" onClick="stopRefresh()"/>

</body>
</html>

Open in new window

Unavngivet.bmp

anilallewar

Can you change the href value to "http://www.google.co.in/" and check? I have a feeling that the href is not resolved correctly by the browser.

Mickeys

ASKER

well If I change it to google ......and I press the refresh key it takes me to google.
so mine was right...index.jsp......

So there must be something else that is wrong.
Is the textinput field thought that I should write the every seconds I want to have it updated?

anilallewar

Hmm..interesting, if I update the value of test field using the counter it works. See attached code; but it is not causing the href to refresh. This looks like something else; I am looking into that.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Counter Testing</title>
</head>
<body>
<script language="javascript">
 var t;
var timer_is_on=0;
var c=0;
function timedRefresh()
{
	//window.location.href = "Sample.jsp";
	document.getElementById('txt').value=c;
	c=c+1;
    t=setTimeout("timedRefresh()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedRefresh();
  }
}

function stopRefresh()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
             
<input type="button" value="Refresh On" onClick="doTimer()"/>
<input type="text" id="txt">
<input type="button" value="Refresh Off" onClick="stopRefresh()"/>


</body>
</html>

Open in new window

Mickeys

ASKER

Yes it is strange. I am also looking at it.
The textfield you can remove and put in the seconds hardcoded instead because I want it to be updated every 15 seconds.

Do you want me to send over the holde project? Or you will manage to do it with your code?

anilallewar

Hmm...it looks like the href is refreshed only manually and not through Javascript timer; strange!!

This looks like an issue with Javascript support by the browser. The other way you can refresh the page is by setting a refresh header in the JSP. This will refresh the JSP at the specified interval; the downside is you will NOT have capability to turn refresh off. It cannot be done by sending a hidden parameter also as the header asks the browser to reload the same page and the values are not submitted.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Counter Testing</title>
</head>
<body>
<%! int count=0;%>
<script language="javascript">
 var t;
var timer_is_on=0;
var c=0;
function timedRefresh()
{
	window.location.reload();
	document.getElementById('txt').value=c;
	c=c+1;
    t=setTimeout("timedRefresh()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedRefresh();
  }
}

function stopRefresh()
{
document.getElementById('refresh').value="false";
alert(document.getElementById('refresh').value);
clearTimeout(t);
timer_is_on=0;
}
</script>
             
<input type="button" value="Refresh On" onClick="doTimer()"/>
<input type="text" id="txt">
<input type="hidden" id="refresh"/>
<input type="button" value="Refresh Off" onClick="stopRefresh()"/>
<%="Count is:" + count++ +":" + request.getParameter("refresh")%>

<% if (!("false".equalsIgnoreCase(request.getParameter("refresh")))){
			response.setHeader("Refresh", "1");
}%>

</body>
</html>

Open in new window

Mickeys

ASKER

well that works ok. But the best thing would be to have the abillity to choose.

Count is:5:null

so I guess the null thing is the problem?

ASKER CERTIFIED SOLUTION

anilallewar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial