xPages countdown timer

Question

I am looking to have a countdown timer (much like the booking agency websites like ticketek use) so the user knows that we will hold a reservation for 10 minutes, and they better hurry up and fill in the form!

I have a gap in my knowledge with how I can incorporate other javascript into an xPage. I would appreciate any assistance.

Essentially my plan is as follows:

• Load the page.
• Have a countdown timer run from 10:00 to 0:00
• At 0:00, go to the new page and lose all data entered

To do this, I referenced the top answer in this stackoverflow post (The simplest possible JavaScript countdown timer?) and am trying to use it in the xPage.

I have incorporated this code into an xPage (see below) as is (so it does not work) hoping it would work, and to then change it to use a computed field control. I have left it as is hoping someone can direct me to where my understanding of this is wrong?

Any pointers as to where I am going wrong, or how best to get a control like this working?

<?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>

Answer 1

Put the CSJS code into onClientLoad event. After changing some things 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&#160;<span id="time">05:00</span>&#160;minutes.
    </div>
</xp:view>

In case you have to clean up something in your XPage after time is up then create a panel which gets partial refreshed when time is up:

    ...
    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>