What is preventing my setInterval function from properly executing?

Question

I have a jTable that I would like to refresh every X number of seconds. Previously I had this running correctly and made some small edits and now it doesnt function properly and I cannot determine what I did that would cause this.

Here is the code from my jTable and start/stop functions:

<script type="text/javascript">
            var run=null;
            $(document).ready(function() {
                $('#TableContainer').jtable({
                    title: '',
                    actions: {
                        listAction: 'JSONCreator',
                    },
                    ajaxSettings: {
                        type: 'POST',
                        dataType: 'json'
                    },
                    fields: {
                        DeviceId: {
                            key: true,
                            list: false
                        },
                        DeviceTag: {
                            sorting: false,
                            search: true,
                            title: 'D',
                            width: '40%'
                        },
                        CH1: {
                            title: 'C1',
                            width: '10%'
                        },
                        CH2: {
                            title: 'C2',
                            width: '10%'
                        },
                        Timestamp: {
                            title: 'T',
                            width: '30%',
                            create: false,
                            edit: false
                        }
                    },
                });
                $('#TableContainer').jtable('load');
            });
            function startFunction() {
                document.title = '(Running)';
                run = window.setInterval("$('#TableContainer').jtable('reload')", 5000);
                window.open('M');
            }
            function stopFunction() {
                document.title = 'W';
                window.clearInterval(run);
                window.open('M');
            }
        </script>

and then after I have two buttons within my body defined like this:

<input type="submit" value="Start" onclick="startFunction()"/>
<input type="submit" value="Stop" onclick="stopFunction()"/>

and below this I have this line

<div id="TableContainer"/>

Now it will perform the function once when I press either button but afterwards it wont continue to reload the table.

window.setInterval("$('#TableContainer').jtable('reload')", 5000);

What is causing this to happen? or else how can I debug something like this? as I said before this was previously running correctly

Answer 1

You are not cancelling the submit action.

<input type="submit" value="Start" onclick="startFunction()"/>
<input type="submit" value="Stop" onclick="stopFunction()"/>

you need to return false or call preventDefault

<input type="submit" value="Start" onclick="startFunction(); return false;"/>
<input type="submit" value="Stop" onclick="stopFunction(); return false;"/>

You really should not be using inline events, You are using jQuery, utilize it!

$(window).on("click", "input[type=submit]", function(e) {
    e.preventDefault();
    if (this.value==="Start") {
        startFunction();
    } else {
        stopFunction();
    }
});

And for your setTimeout, you really should not pass in a string since that has to be evaluated every time it is called, pass in a function that is either named or anonymous.

Answer 2

Your code is malformed.

window.setInterval("$('#TableContainer').jtable('reload')", 5000);

should read

 window.setInterval(function(){$('#TableContainer').jtable('reload');},5000)