0

I'm trying to fire off a javascript function using body onmousemove="resetTimers()", which works teriffic in Chrome and Firefox, but does not work so well in Internet Explorer.

I wrote to the console a log message so i knew when the event was firing, and basically in IE it looks like the onmousemove event fires every 5 seconds if my mouse is within the IE window, even if it is not being moved at all.

Anyone have any thoughts as to why this is happening? Or how I can correct it?

My javascript code is below, and basically it's an activity timer that fires the startTimers() function on the body onload event, and the resetTimers() function on the body onmousemove event.

Any help would be greatly appreciated! Again Chrome and Firefox work great, IE does not, which figures.

<script type="text/javascript">
    // Set timeout variables
    var timoutWarning = 10000;         
    var dialogTimeout = 30; // Countdown on idle timeout in seconds
    var logoutUrl = '/logout.php'; // URL to logout page
    var warningTimer;
    var dialogTimer;
    var $popupDialog;
    // Start timers
    function startTimers() {                                    
        warningTimer = setTimeout("idleWarning()", timoutWarning);
    }
    // Reset timers
    function resetTimers() {
        console.log('resetTimers was called');
        clearTimeout(warningTimer);
        clearTimeout(dialogTimer);          
        startTimers();
        if(typeof $popupDialog !== 'undefined'){
            $popupDialog.dialog('close');          
        }
        dialogTimeout=30;
    }
    // Show idle timeout warning dialog.
    function idleWarning() {
        clearTimeout(warningTimer);
        $popupDialog = $('<div></div>')
            .html('<p>Are you still there?  If no activity is detected within the next 30 seconds you will be automatically logged out!</p>')
            .dialog({
                autoOpen: false,
                modal: true,
                height: 140,
                width: 350,
                title: 'Session Timeout'});
        $popupDialog.dialog('open');
        countdownTimer();               
    }
    // Logout the user.
    function idleTimeout() {            
        //document.location = logoutUrl;
    }
    //Countdown 30 second timer
    function countdownTimer() {
        dialogTimer=setTimeout("countdownTimer()",1000);
        if(dialogTimeout>0) {
            if(dialogTimeout>1){
                $popupDialog.html('<p>Are you still there?  If no activity is detected within the next '+dialogTimeout+' seconds you will be automatically logged out!</p>');           
            } else {
                $popupDialog.html('<p>Are you still there?  If no activity is detected within the next '+dialogTimeout+' second you will be automatically logged out!</p>');            
            }
        } else {
            if(typeof $popupDialog !== 'undefined'){
                $popupDialog.dialog('close');       
            }
            idleTimeout();
        }
        dialogTimeout-=1;
    }
</script>
Teemu
  • 22,918
  • 7
  • 53
  • 106
Phil
  • 4,029
  • 9
  • 62
  • 107
  • `setTimeout("idleWarning()", timoutWarning);` <- Please don't do this. Passing a string to `setTimeout` means it will use `eval()` which is slow and not secure! instead pass a function reference `setTimeout(idleWarning, timeoutWarning);` or like this `setTimeout(function(){ muFunc() }, timeoutWarning);` http://stackoverflow.com/questions/6232574/is-it-bad-practice-to-pass-a-string-to-settimeout-if-yes-why – Mark Walters Jun 13 '13 at 15:38
  • Thank you for the tip Mark, I've updated the code to use function reference instead of string value on all setTimeouts. Problem still persists though where the resetTimers() function is being called over and over again at 5 second intervals, only in IE. – Phil Jun 13 '13 at 15:41
  • I know why it's happening. I have an invisible iframe that is being refreshed every 5 seconds in order to store the time the users have spent on the page in seconds. That has to be it since it is every 5 seconds. Now to determine how to correct it....why does IE always have to be such a pain. – Phil Jun 13 '13 at 15:48
  • by all accounts mousemove is a compatible event for IE8, 9, 10 although this reference - http://www.quirksmode.org/dom/events/index.html - has it as `mousemove` not `onmousemove` try changing it to see what happens. If this doesn't change anything then more than likely another part of your code is causing the issue in IE. interestingly in the link i've just given when you navigate to the mousemove event it does say IE6, 7, 8 aren't compatible with calling the event on the document. – Mark Walters Jun 13 '13 at 15:48
  • Glad you found the cause Phil. The iframe refreshing is causing the onmousemove event on the body to be called again in IE. Try using `document.onmousemove = resetTimers;` in your javascript rather than calling your function inline. – Mark Walters Jun 13 '13 at 15:51
  • @Phil Where's that `mousemove`, can't find it from your code. – Teemu Jun 13 '13 at 15:54
  • @Teemu he hasn's shown it but he's said he runs in on the `` tag - ` – Mark Walters Jun 13 '13 at 15:56
  • @MarkWalters It seems I need glasses... Ofcourse, it's executing `resetTimers()` on every refresh, just like you said in your previous comment. I just don't understand, why it is supposed to work in other browsers, `()` should execute the function in them as well... – Teemu Jun 13 '13 at 16:02
  • I have an iframe that contains within it's header, causing it to refresh every 5 seconds because we want to store the users time every 5 seconds. This is causing the parent page of the iframe to apparently trigger a mousemove event. It does not cause the event to fire in chrome and firefox, only IE. – Phil Jun 13 '13 at 16:12
  • I've taken the onmousemove call out of the body tag and added it via the document object like this... as well using the window.onmousemove=function(){resetTimers()}; Neither worked, IE is still firing the onmousemove event every 5 seconds. :( – Phil Jun 13 '13 at 16:24
  • Okay I took the iframe out of the page, and instead am calling a javascript function every 5 seconds that in turn makes an ajax call to the script I am using to update the database. Same functionality the iframe was providing but I was hoping it would be without the triggering of the onmousemove event....no such luck. Does anyone have any ideas as to how I can update my database every 5 seconds but without causing the onmousemove event in the browser? – Phil Jun 13 '13 at 17:00
  • Got it, I decided to scrap the onmousemove event and go with the onscroll and onclick events instead. both still provide what i need, and I don't have to worry about the iframe refresh or the ajax call causing events to trigger when i don't want them to. thanks to all for the help! – Phil Jun 13 '13 at 17:10
  • @Phil glad you fixed it – Mark Walters Jun 14 '13 at 07:55

1 Answers1

0

Got it, I decided to scrap the onmousemove event and go with the onscroll and onclick events instead. both still provide what i need, and I don't have to worry about the iframe refresh or the ajax call causing events to trigger when i don't want them to. thanks to all for the help!

Phil
  • 4,029
  • 9
  • 62
  • 107