Javascript not working in icefaces

[Vineeta Nair]

Hi all,

I am developing a page using icefaces in that i have to insert a timer and implement pagination. I have done the same using javascript but when i run the code the timer and pagination functionality doesnt seem to work.

Below is the code.Please help me out and let me know how to make javascripts work in icefaces.

Timer.js

var interval;
    var minutes = 1;
    var seconds = 5;
    window.onload = function() {
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                     var minute_text = '';
                     var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
                    clearInterval(interval);

                    alert("Time's Up!!!");                    
                    location.href = "Score.jspx";
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }

Pagination.js

function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
    
    this.showRecords = function(from, to) {        
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)  
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }
    }
    
    this.showPage = function(pageNumber) {
                if (! this.inited) {
                                alert("not inited");
                                return;
                }

        var oldPageAnchor = document.getElementById('pg'+this.currentPage);
        oldPageAnchor.className = 'pg-normal';
        
        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg'+this.currentPage);
        newPageAnchor.className = 'pg-selected';
        
        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }   
    
    this.prev = function() {
        if (this.currentPage > 1)
            this.showPage(this.currentPage - 1);
    }
    
    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }                        
    
    this.init = function() {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1); 
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function(pagerName, positionId) {
                if (! this.inited) {
                                alert("not inited");
                                return;
                }
                var element = document.getElementById(positionId);
                
                var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';
        for (var page = 1; page <= this.pages; page++) 
            pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
        pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';            
        
        element.innerHTML = pagerHtml;
    }
}

CoreJava.jspx

<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ice="http://www.icesoft.com/icefaces/component"
	xmlns:ice-cc="http://www.icesoft.com/icefaces/component"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jstl/core">
<jsp:directive.page contentType="text/html;charset=utf-8" />
    <html>
        <head>
            <style type="text/css"> 
.pg-normal { 
color: black; 
font-weight: normal; 
text-decoration: none; 
cursor: pointer; 
} 
.pg-selected { 
color: black; 
font-weight: bold; 
text-decoration: underline; 
cursor: pointer; 
} 
</style> 
            <script type="text/javascript" src="timer.js"><jsp:text/></script>
            <script type="text/javascript" src="pagination.js"><jsp:text/></script>
            
            
        </head>
   <body> 
<form action="" method="get" enctype="application/x-www-form-urlencoded"> 
<table id="results">
    <div id='countdown' style='float:right'><jsp:text/></div>
    

<tr> 
<th>#</th> 
<th>field</th> 
</tr> 
<tr> 
<td>1</td> 
<td><input type="text" name="field-name" value="rec1"/></td> 
</tr>
<tr> 
<td>2</td> 
<td><input type="text" name="field-name" value="rec2"/></td> 
</tr> 
<tr> 
<td>3</td> 
<td><input type="text" name="field-name" value="rec3"/></td> 
</tr> 
<tr> 
<td>4</td> 
<td><input type="text" name="field-name" value="rec4"/></td> 
</tr> 
<tr> 
<td>5</td> 
<td><input type="text" name="field-name" value="rec5"/></td> 
</tr> 
<tr> 
<td>6</td> 
<td><input type="text" name="field-name" value="rec6"/></td> 
</tr> 
<tr> 
<td>7</td> 
<td><input type="text" name="field-name" value="rec7"/></td> 
</tr> 
<tr> 
<td>8</td> 
<td><input type="text" name="field-name" value="rec8"/></td> 
</tr> 
<tr> 
<td>9</td> 
<td><input type="text" name="field-name" value="rec9"/></td> 
</tr> 
<tr> 
<td>10</td> 
<td><input type="text" name="field-name" value="rec10"/></td> 
</tr> 
</table> 

 
<div id="pageNavPosition"><jsp:text/></div>
</form> 
<script type="text/javascript"><jsp:text/>
var pager = new Pager('results', 4); 
pager.init(); 
pager.showPageNav('pager', 'pageNavPosition'); 
pager.showPage(1);
</script>
</body> 
</html> 

</jsp:root>

[Fixed code tags - see UseCodeTags for details]

[dennis deems]

Mind if I ask why you don't just use the DataPaginator provided by IceFaces?