XPages Countdown Timer
I am looking to have a countdown timer (just like booking agency websites like using a ticket) so the user knows we will make a reservation within 10 minutes and they better hurry up and fill out the form!
I have a gap in my knowledge how can I include other javascript in xPage. I would appreciate any help.
Essentially my plan looks like this:
- Load the page.
- You have a countdown timer from 10:00 to 0:00.
- At 0:00 go to a new page and lose all entered data.
To do this, I referenced the main answer in this stackoverflow article ( The simplest possible JavaScript countdown timer? ) And am trying to use it in xPage.
I included this code in xPage (see below) as it is (which is why it doesn't work), hoping it would work, and then change it to use a computed control field. I left it because I'm hoping someone can direct me to where my understanding of this is wrong?
Any guidance as to where I am going wrong or what is the best way to get this kind of control?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.afterPageLoad>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);}]]></xp:this.script>
</xp:executeScript>
</xp:this.afterPageLoad>
<div>
Please complete in <span id="time">05:00</span>minutes.
</div>
</xp:view>
source to share
Place the CSJS code in the onClientLoad event. After changing some features, it works now:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:eventHandler
event="onClientLoad"
submit="false">
<xp:this.script><![CDATA[
function startTimer(duration, display) {
var timer = duration;
setInterval(function () {
if (--timer <= 0) {
window.location="http://www.google.de";
}
var minutes = parseInt(timer / 60, 10);
var seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.innerHTML = minutes + ":" + seconds;
}, 1000);
}
var fiveMinutes = 60 * 5;
var display = document.getElementById("time");
startTimer(fiveMinutes, display);
]]></xp:this.script>
</xp:eventHandler>
<div>
Please complete in <span id="time">05:00</span> minutes.
</div>
</xp:view>
If you need to clear something in the XPage after the time, create a panel that will partially refresh after the time has passed:
...
if (--timer <= 0) {
XSP.partialRefreshPost("#{id:timeIsUp}", {params: {timeIsUp: "timeIsUp"}});
}
...
<xp:panel id="timeIsUp">
<xp:this.rendered><![CDATA[#{javascript:
if (param.timeIsUp <== null) {
' clean your data
context.redirectToPage('tooLate')
};
true
}]]></xp:this.rendered>
</xp:panel>
source to share