...

View Full Version : JavaScript paging- need help



sha88
10-06-2011, 04:53 AM
I am developing simple quiz page using php and JavaScript. i have 24 questions in 6 pages which i was loaded from a xml file. i just want to do the validation page by page. those pages loading from JavaScript paging functions.

Now the validations happen to all 24 questions. i need to do the validations only in the current page then the other page..

here is a sample link which i want to develop...(the quiz thing)
http://www.careerpath.com/career-tests/career-quiz/
please help me...



<table border=0 width=520px>
<tr>
<td >
<div style=" border:0px solid gray;">
<br>
<div style="width:400px;height:52px;background:url(images/head-careerpath-quiz-test.gif ) no-repeat;valign:middle;margin-left:25px;line-height:52;"></div>
<div style="width:500px;padding-left:10px;">
<fieldset>
<form id="formID" class="formular" action="result.php" method="get">
<b>Getting Started</b> <br> <br>
There are 24 pairs of statements below. As you read each pair, click the one statement in each pair that has the most appeal for you. As you select, assume that each choice is equal in pay, prestige, and challenge. If you are uncertain of a job title, select the one that has the most appeal for you.
<br><br><div style="width:470px;height:31px;valign:middle;line-height:31px; color:#FFF;background:url(images/question_header_single_test.gif) no-repeat;">&nbsp;&nbsp;&nbsp;<b>Please respond to the following statements.</b>
</div>
<div style="width:470px; background:#ece6f8;">
<table id="results" border=0>
<tr>
<th></th>
<th></th>
</tr>
<?php

// set name of XML file
$file = "question.xml";

// load file
$xml = simplexml_load_file($file) or die ("Unable to load XML file!");

?>




<?php foreach ($xml->question as $section) {$quesionindex++; ?>
<tr>

<td valign="top"> <?php echo $section->qno.".";?></td>

<td valign="top">
<input class="validate[required] radio" type='radio' id="answer1_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='0' ><?php echo $section->answer1->answer;?> <br />
<input class="validate[required] radio" type='radio' id="answer2_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='1'><?php echo $section->answer2->answer;?>
</td>


</tr>
<?php } ?>


</table>


<br><br>
<div id="pageNavPosition"></div>
<br>
<div><input class="submit" type="submit" /><input type="reset" /></div>
</div>
</form>

<script type="text/javascript"><!--
var pager = new Pager('results', 6);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>




</fieldset>
</div>

</div>




</div>
</td>

</tr>

</table>

here is the javascript i am using for paging


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 i=1;
var pagerHtml = '<span onclick="' + pagerName + '.prev();i--;" class="pg-normal"> &#171 Prev </span> | ';
for (var page = 1; page <= this.pages; page++)

pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';

//pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';
pagerHtml += '<input value="Continue" type="submit" onclick="'+pagerName+'.next();" class="pg-normal"/> ';


element.innerHTML = pagerHtml;
}
}

niralsoni
10-06-2011, 11:05 PM
this is what i have interpreted based on your code..

I could not be able to test it... I have highlighted my piece of code...



function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;

function isCurrentPageValid() {
var isPageValid = false;
var rowStart = (this.currentPage - 1) * this.itemsPerPage + 1;
var rowEnd = rowStart + this.itemsPerPage;

var rows = document.getElementById(tableName).rows;
if(rowStart > rows.length || rowStart <= 0 || rowEnd > rows.length || rowEnd <= 0) {
alert('error in validating current page');
return;
}
// i starts from 1 to skip table header row
for (var i = rowStart; i < rowEnd; i++) {
// your validation code goes here
// set isPageValid = true or false accordingly
if(!isPageValid) break;
}
return isPageValid;
}
...
//other functions
...
this.next = function() {
var isValidPage = isCurrentPageValid();
if(!isValidPage) {
alert('page is not valid');
return;
}
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
}


can you please check it out whether its working or not ?

Thanks & Regards,
Niral Soni

sha88
10-07-2011, 08:09 AM
Thank you very much...:) I wll try on the validation and updates here ..
thanks again niralsoni

sha88
11-04-2011, 03:49 PM
Thank u this was worked... :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum