auto reload div with toggle checkbox and user selected interval

Question

I have a chart that is dynamically created every time my page loads. I have it in a <div id="plot"></div> block. I would like to give the user the ability to toggle auto refresh on/off AND select the refresh rate. There are lots closely related solutions to this, but none that combines this and I'm struggling. For toggling a full reload, I'm using this example. This works well. However I can't figure out how to extend it to let the user select a interval from something like:

<select name="interval" id="interval">
    <option value="1000">1</option>
    <option value="2000">2</option>
    <option value="5000">5</option>
    <option value="10000">10</option>
</select>

I seem to both not know how to pass that result into the javascript and make it remember the interval after the reload. I'm guessing I need to not only pass it into the javascript, but somehow cancel the current timeout and reset it to the new value?

Alec Menconi · Accepted Answer · 2014-05-25T05:19:32.333

Maybe do something simple like pass in a second parameter of the interval select id in the onClick event like:

<input type="checkbox" onclick="toggleAutoRefresh(this, 'interval');" id="reloadCB"> Auto Refresh

Then in the JS set a new variable with the interval selection and if the page reloads include the interval time after #autoreload and pass it between reloads in the anchor hash:

   var reloading;
    $(document).ready(function () {

        $('#interval').change(function () {
            if (document.getElementById("reloadCB").checked) {
                var intervalSelection = $(this).find(":selected").val();
                window.location.replace("#autoreload-" + intervalSelection);
                reloading = setTimeout("window.location.reload();", intervalSelection);
            } else {
                window.location.replace("#");
                clearTimeout(reloading);
            }
        });

    });

    function checkReloading() {
        if (window.location.hash.substring(0, 11) == "#autoreload") {
            var intervalSelection = window.location.hash.substring(12, window.location.hash.length);
            reloading = setTimeout("window.location.reload();", intervalSelection);
            document.getElementById("reloadCB").checked = true;
            var intervalSelect = document.getElementById('interval');
            var intervalOptions = intervalSelect.options.length;
            for (var i = 0; i < intervalOptions; i++) {
                if (intervalSelect.options[i].value == intervalSelection) {
                    intervalSelect.options[i].selected = true;
                    break;
                }
            }
        }
    }

    function toggleAutoRefresh(cb, intervalID) {
        var intervalSelection = $('#' + intervalID).find(":selected").val();
        if (cb.checked) {
            window.location.replace("#autoreload-" + intervalSelection);
            reloading = setTimeout("window.location.reload();", intervalSelection);
        } else {
            window.location.replace("#");
            clearTimeout(reloading);
        }
    }

    window.onload = checkReloading;

Haven't tested any of this and probably not the most elegant solution but first thing that came to mind.

Edit: Added some code to set drop down to value passed through hash tag as well as some JQuery to detect change of value on drop down and set new interval time.

The html input needs interval in single quotes (not double) to work. This is a start but has two deficiencies. (1) the select shows "1" instead of the current value on reload. (2) the interval only changes when checking the box (if box is currently checked, changes in interval are ignored). It's usable for now, but a solution addressing (1) and (2) would be preferred. — proximous, May 23 '14 at 22:52
Good points. I've edited the answer to include some JQuery. It should now set the drop down to the current refresh rate as well as change the refresh rate on detection of drop down change. — Alec Menconi, May 25 '14 at 05:20

auto reload div with toggle checkbox and user selected interval

1 Answers1