asked on

How can I get my page to refresh with User Options???

Here is what I am trying to do:
The user makes a selection from two radio buttons.
(Yes,I want this page to refresh Automatically;
or No I don't want the page to refresh
(No is set as default)

If the Yes is selected, then
A Refresh button appears along with a text box.
The page will refresh at a set interval set in the text box by the user.
The user clicks the refresh button and the page is set to refresh at the rate set by the user.

If the No is selected then
do nothing

I can make the page automatically refresh with code, but I want the user to be able to set the intervals.

What do I need to do for this to work???

ASKER CERTIFIED SOLUTION

fritz_the_blank

membership

This solution is only available to members.

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

Start Free Trial

gmsolutions

parse the documents location element for the users setting. If a refresh variable exists set a timout based on the variable and ensure the element containing the timer textbox is visble. If the variable exists then after a timout period navigate back to tyhe location ensuring you append the setting before you do.

."mooo?refresh=60

as sugested you could also use frames ensuring you dont need to parse the location for any variables.

russellshome

You could also store the value in a cookie.

The following sample shows all three methods in action:

<html>
      <head>
            <script>
function QueryString(key)
{
      var value = null;
      for (var i=0;i<QueryString.keys.length;i++)
      {
            if (QueryString.keys[i]==key)
            {
                  value = QueryString.values[i];
                  break;
            }
      }
      return value;
}
QueryString.keys = new Array();
QueryString.values = new Array();

function QueryString_Parse()
{
      var query = window.location.search.substring(1);
      var pairs = query.split("&");

      for (var i=0;i<pairs.length;i++)
      {
            var pos = pairs[i].indexOf('=');
            if (pos >= 0)
            {
                  var argname = pairs[i].substring(0,pos);
                  var value = pairs[i].substring(pos+1);
                  QueryString.keys[QueryString.keys.length] = argname;
                  QueryString.values[QueryString.values.length] = value;
            }
      }

}

QueryString_Parse();

function setCookie(name, value) {
      var expires = new Date()
      expires.setTime(expires.getTime() + 1000*60*60)
      document.cookie =
            name + "=" + escape(value) +
            ((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
}

function getCookie(Name) {
      var search = Name + "="
      if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) {
                  offset += search.length
                  end = document.cookie.indexOf(";", offset)
                  if (end == -1)
                        end = document.cookie.length
                  return unescape(document.cookie.substring(offset, end))
            }
      }
      return null
}

function getObject(id) {
      if (document.all) {
            return document.all(id);
      } else if (document.getElementById) {
            return document.getElementById(id);
      }
      return null;
}

var defaultInterval = 10000;
var frameInterval = defaultInterval;
var interval = defaultInterval;
var myInterval = null;
var refreshFunction = QueryString("refreshFunction");

function refresh() {
      if (refreshFunction!="frame") {
            if (refreshFunction=="cookie" && getObject("myForm").refreshRate.value==String(interval)) {
                  getObject("myForm").refreshRate.value = "";
            }
            getObject("myForm").submit();
      }
}

function setRefreshInterval() {
      if (myInterval != null) {
            window.clearInterval(myInterval);
      }
      myInterval = window.setInterval("refresh();",interval);
      getObject("myForm").refreshRate.value = String(interval);
}

function getInterval() {
      if (refreshFunction=="cookie") {
            if (getCookie("interval") != null) {
                  interval = parseInt(getCookie("interval"));
            }
            setCookie(String(interval));
      }
      if (refreshFunction=="query") {
            if (QueryString("refreshRate") != null) {
                  interval = parseInt(QueryString("refreshRate"));
            }
      }
}

function saveInterval(theForm) {
      if (myInterval != null) {
            window.clearInterval(myInterval);
      }
      refreshFunction = theForm.refreshFunction.value;
      var interval2 = parseInt(theForm.refreshRate.value);
      if (isNaN(interval2)) {
                  alert("Enter a number");
                  theForm.refreshRate.value = String(interval);
      } else {
            if (interval2 < 3000) {
                  alert("Enter a number >= 3000");
                  theForm.refreshRate.value = String(interval);
            } else {
                  if (refreshFunction=="cookie") {
                        setCookie("interval",theForm.refreshRate.value);
                        theForm.refreshRate.value="";
                  }
                  theForm.submit();
            }
      }
}

function loadPage() {
      getInterval();
      setRefreshInterval();
      var refreshFunction = QueryString("refreshFunction");
      if (refreshFunction != null) {
            var objSelector = getObject("myForm").refreshFunction;
            for (var i=0;i<objSelector.options.length;i++) {
                  if (objSelector.options[i].value==refreshFunction) {
                        objSelector.options[i].selected = true;
                  }
            }
            if (objSelector.value == "cookie") {
                  getObject("myForm").refreshRate.value = getCookie("interval");
            }
      }
      var refreshRate = QueryString("refreshRate");
      if (refreshRate != null && refreshRate != "") {
            getObject("myForm").refreshRate.value = refreshRate;
      } else {
            if (refreshFunction="cookie") {
                  getObject("myForm").refreshRate.value = getCookie("interval")
            }
      }
}
            </script>
      </head>
      <body>
            <form id="myForm" name="myForm" action="temp.htm" style="visibility:visible;">
                  <input type="hidden" name="frame" value="false"> Refresh Using:
                  <select name="refreshFunction">
                        <option value="cookie">Cookie</option>
                        <option value="query" selected>Query String</option>
                        <option value="frame">Frame</option>
                  </select>
                  <br>
                  Refresh Rate: <input type="text" name="refreshRate" value="">
                  <br>
                  <input type="button" value="Set Interval" onclick="saveInterval(this.form);">
            </form>
            <script>
      loadPage();
      if (refreshFunction=="frame") {
            document.write("<iframe width='300' height='150' src='" + getObject("myForm").action + "?frame=true&refreshFunction=query&refreshRate=" + QueryString("refreshRate") + "'>");
      } else {
            var tmpFunction = QueryString("refreshFunction");
            if (tmpFunction == null) {tmpFunction = "query"}
            var tmpRate = QueryString("refreshRate");
            if (tmpFunction=="cookie") { tmpRate=getCookie("interval"); } else {
                  if (tmpRate == null || tmpRate=="") {tmpRate = "10000";}
            }
            document.write("Interval: " + tmpRate);
            if (QueryString("frame") == "true") {
                  getObject("myForm").style.visibility = "hidden";
                  getObject("myForm").frame.value="true";
            } else {
                  document.write(" refreshFunction: " + tmpFunction);
            }
      }
            </script>
      </body>
</html>

russellshome

Save the above code in a file: temp.htm

jaysolomon

No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: fritz_the_blank {http:#8228418}

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer

russellshome

I think my answer is more useful & I would appreciate some points for it.