Call a javascript function to refresh page when idle Error

I have the following Javascript codes in my php file called qc.php to refresh the page if idling more than 1 minute. This is working perfectly.

//If idling for 1 minutes, page will refresh

var IDLE_TIMEOUT = 60; //in seconds. So every 1 minutes idling, page will refresh
var _idleSecondsTimer = null;
var _idleSecondsCounter = 0;

document.onclick = function() {
  _idleSecondsCounter = 0;
};

document.onmousemove = function() {
  _idleSecondsCounter = 0;
};

document.onkeypress = function() {
  _idleSecondsCounter = 0;
};

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
  _idleSecondsCounter++;
  var oPanel = document.getElementById("SecondsUntilExpire");
  if (oPanel)
    oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
  if (_idleSecondsCounter >= IDLE_TIMEOUT) {
    window.clearInterval(_idleSecondsTimer);
    document.location.href = "qc.php";
  }
}

Scenario

I want to do this refreshing in many other pages and thus decided to make it as a function in a separate javascript file. Thus I created a function as follows and saved in another file called func.js

function idlingTrigger(page) {
  //If idling for 1 minutes, page will refresh

  var IDLE_TIMEOUT = 60; //in seconds. So every 1 minutes idling, page will refresh
  var _idleSecondsTimer = null;
  var _idleSecondsCounter = 0;

  document.onclick = function() {
    _idleSecondsCounter = 0;
  };

  document.onmousemove = function() {
    _idleSecondsCounter = 0;
  };

  document.onkeypress = function() {
    _idleSecondsCounter = 0;
  };

  _idleSecondsTimer = window.setInterval(CheckIdleTime(page), 1000);

}

function CheckIdleTime(page) {
  _idleSecondsCounter++;
  var oPanel = document.getElementById("SecondsUntilExpire");
  if (oPanel)
    oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
  if (_idleSecondsCounter >= IDLE_TIMEOUT) {
    window.clearInterval(_idleSecondsTimer);
    document.location.href = page;
  }
}

Then I included func.js file in my qc.php file as follows

<script src="func.js"></script>

Problem

When I tried to call that function from qc.php as follows,

idlingTrigger("qc.php");

I am having Uncaught ReferenceError in my console

Does anyone know what is the problem here?

Edit 1

Realised that I am not passing the arguments between functions. So I edited my function as follows. Also changed all the private variable by removing _

function idlingTrigger(page) {
  //If idling for 10 minutes, page will refresh

  var IDLE_TIMEOUT = 60; //in seconds. So every 10 minutes idling, page will refresh
  var idleSecondsTimer = null;
  var idleSecondsCounter = 0;

  document.onclick = function() {
    idleSecondsCounter = 0;
  };

  document.onmousemove = function() {
    idleSecondsCounter = 0;
  };

  document.onkeypress = function() {
    idleSecondsCounter = 0;
  };

  idleSecondsTimer = window.setInterval(CheckIdleTime(page, idleSecondsCounter, IDLE_TIMEOUT), 1000);

}

function CheckIdleTime(page, idleSecondsCounter, IDLE_TIMEOUT) {
  idleSecondsCounter++;
  var oPanel = document.getElementById("SecondsUntilExpire");
  if (oPanel)
    oPanel.innerHTML = (IDLE_TIMEOUT - idleSecondsCounter) + "";
  if (idleSecondsCounter >= IDLE_TIMEOUT) {
    window.clearInterval(idleSecondsTimer);
    document.location.href = page;
  }
}

Now the console errors gone. But page doesn’t seems refreshing. Any idea anyone?

Edit 2

I changed func.js file the following way and it is refreshing. But this way the page name is still static which is not what I need.

//If idling for 1 minutes, page will refresh
var idleSecondsTimer = null;
var IDLE_TIMEOUT = 60; //in seconds. So every 1 minutes idling, page will refresh
var idleSecondsCounter = 0;

function idlingTrigger() {


  document.onclick = function() {
    idleSecondsCounter = 0;
  };

  document.onmousemove = function() {
    idleSecondsCounter = 0;
  };

  document.onkeypress = function() {
    idleSecondsCounter = 0;
  };

  idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);
}

function CheckIdleTime() {
  idleSecondsCounter++;
  var oPanel = document.getElementById("SecondsUntilExpire");
  if (oPanel)
    oPanel.innerHTML = (IDLE_TIMEOUT - idleSecondsCounter) + "";
  if (idleSecondsCounter >= IDLE_TIMEOUT) {
    window.clearInterval(idleSecondsTimer);
    document.location.href = "qc.php";
  }
}

So what I noticed is, the moment I gave some argument to the function CheckIdleTime, the whole thing is not refreshing anymore. Anyone knows how to make the page name dynamic so that I can use this whole code as a common function for any page that I use?

Answer

I Modified it the following way. As you can see, I didn’t pass any arguments into CheckIdleTime, instead use a global variable page in qc.php file. Then used that global page variable inside the function CheckIdleTime.

Contents of func.js file

//If idling for 1 minutes, page will refresh
var idleSecondsTimer = null;
var IDLE_TIMEOUT = 60; //in seconds. So every 1 minutes idling, page will refresh
var idleSecondsCounter = 0;

function idlingTrigger() {

  document.onclick = function() {
    idleSecondsCounter = 0;
  };

  document.onmousemove = function() {
    idleSecondsCounter = 0;
  };

  document.onkeypress = function() {
    idleSecondsCounter = 0;
  };

  idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);
}

function CheckIdleTime() {

  idleSecondsCounter++;
  var oPanel = document.getElementById("SecondsUntilExpire");
  if (oPanel)
    oPanel.innerHTML = (IDLE_TIMEOUT - idleSecondsCounter) + "";
  if (idleSecondsCounter >= IDLE_TIMEOUT) {
    window.clearInterval(idleSecondsTimer);
    document.location.href = page;
  }
}

Then in qc.php, added the following codes

<script src="func.js"></script>  
var page = "qc.php"; //Pass any page name you want here and save it in the variable called `page`
idlingTrigger();

There might be an easy or elegant way. If someone has better way of doing please tell me how. Anyway the above method works

Leave a Reply

Your email address will not be published. Required fields are marked *