Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript paging- need help

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

    Code:
    <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
    Code:
    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;
        }
    }
    Last edited by sha88; 10-06-2011 at 05:06 AM. Reason: add another code

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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...

    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

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much... I wll try on the validation and updates here ..
    thanks again niralsoni

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thank u this was worked...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •