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 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two HTML Elements Use the Same Key Stroke to Invoke Two Different Functions

    I have two HTML elements in a web page; namely, an input text field and a data table.

    The keyboard "Enter" key is used in both the input text field and the data table. The "Enter" key for the input text field is to invoke executeSearch( filterEvent ) and the "Enter" key for the data table is to invoke processKeys ( event ).
    Code:
    <input type="text" id="filter" style="width:25em;" onkeypress="executeSearch( filterEvent )"/>
    <table id="countryTable" onkeydown="processKeys( event )"> .....</table>
    The processKeys( event ) invoked by the "Enter" key works well.

    But, when I use the "Enter" key in the input text field, the processKeys( event ) instead of the executeSearch ( filterEvent ) is invoked. Why is the executeSearch( filterEvent ) not recognized?
    Code:
    ...
    			<script language="JavaScript1.1">
     				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ) { executeSearch( filterEvent ); };
    
    			function executeSearch( fe )
    			{
    				if ( !fe ) var fe = window.event;
    				if ( fe.keyCode ) code = fe.keyCode;
    			
    				switch (code)
    				{
                                                                    // Enter Key
    				 	case 13:
    					ValidateBlankField();
    					break;
    				}
    			}
    
    			function processKeys( e ) 
    			{ 
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				
    				switch (keyID)
    				{
    					// Enter Key
    					case 13:
    					chooseCountry();
    					break;
    
                                                                    .....
    
                                                        }
                                            .....
                                            }
    
    			</script>	
    ...
    ...

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript1.1">
     				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ) { executeSearch(  ); };
    
    function executeSearch( e ){
    document.Show.Show0.value=zxcEventObj(e).tagName;
    }
    
    function processKeys( e ){
    document.Show.Show1.value=zxcEventObj(e).tagName;
    }
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    			</script>	</head>
    
    <body>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply. But, my knowledge in JavaScript is not well enough to fix my own code even by trying to understand your code.

    I still face the same problem. The JavaScript function in the input text field is not recognized:
    Code:
    <script language="JavaScript1.1">
     				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ) { executeSearch(  ); };
    
    			function executeSearch( e )
    			{
    				if ( !e ) var e = window.event;
    				if ( e.keyCode ) code = e.keyCode;
    			
    				switch (code)
    				{
                                                                    // Enter Key
    				 	case 13:
    					ValidateBlankField();
    					break;
    				}
    			}
    
    			function processKeys( e ) 
    			{ 
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				
    				switch (keyID)
    				{
    					// Enter Key
    					case 13:
    					chooseCountry();
    					break;
    
                                                                    .....
    
                                                        }
                                            .....
                                            }
    
    </script>	
    ...
    ...

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    The posted code identifies the event object in IE
    For Moz you will need to add the event call to the search textbox

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript1.1">
     				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ) { executeSearch(  ); };
    
    function executeSearch( e ){
     if (zxcEventObj(e).tagName!='INPUT') return false
     if (zxcEventObj(e).id!='Test') return false
     alert('execute search code');
    }
    
    function processKeys( e ){
     if (zxcEventObj(e).tagName!='HTML') return false
     alert('execute the \'country\' code');
    }
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    			</script>	</head>
    
    <body>
    Search Text Box<input size=10 id="Test" >
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use IE6.

    I used your Mozilla code, the executeSearch( e ) for the input text field was invoked. However, I was able to see the result of that function in the browser for about only "one second". Thereafter, the result disappeard and the original screen was displayed.

    How do I "hold" the result on the screen?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    you have not posted enough of your code for me to comment
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your attention to my question. Here is my code:
    Code:
    <script language="JavaScript1.1">
    				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ){ executeSearch( event ); };
    
    			function executeSearch( e )
    			{
                                                            // because I use JSF, I have to use formID:fieldID
    				if ( zxcEventObj(e).id != 'countriesList:filter' ) return false
    			
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				switch (keyID)
    				{
    					case 13:
    					ValidateBlankField();
    					break;
    				}							
    			}
    
    			function processKeys( e ) 
    			{ 
                                                            // The alert( zxcEventObj(e).tagName ); tells me it is BODY instead of HTML
    				if ( zxcEventObj(e).tagName != 'BODY' ) return false
    
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				
    				switch (keyID)
    				{
    					// Enter Key
    					case 13:
    					chooseCountry();
    					break;	
    
                                                                          .......
                                                                          // lots of other keyboard keys and functions and they work
    
                                                             }
    
    			function zxcEventObj(zxce)
    			{
    				if (!zxce) var zxce=window.event;
    				zxce.cancelBubble=true;
    				if (zxce.stopPropagation) zxce.stopPropagation();
    				if (zxce.target) zxceobj=zxce.target;
    				else if (zxce.srcElement) zxceobj=zxce.srcElement;
    				if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
    				return zxceobj;
    			}
    
    </script>
    .....
    <f:view>
    <body class="bodyDefault">
    			<h:form id="countriesList">
    				<div align="center">
    					<h:outputText value="Find  " styleClass="textDefault"/>
    					<h:inputText id="filter" styleClass="withoutTextDefault" onkeypress="executeSearch( event )"/>
    					<p>
     						<div style="height:12em; width:20em;" id="container" class="scrollbar"> 
    							<h:dataTable value="#{countriesManagementBean.countriesList}" var="country" 
    									id="countryTable" styleClass="lovTableDefault"
    									onkeydown="processKeys( event )"
    									ondblclick="addOnclickToDatatableRows();chooseCountry()">
    
    .....
    .....
    
    							</h:dataTable>
    						</div>
    				</div>
    
    </body>
    </f:view>
    </html>

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi VW, please help me. The code does what it is supposed to do but the result stays on the screen for only one second. I am having difficult time to capture the result. My code is shown in the previouse posting.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    still not enough

    Post a link to or a working example
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I am posting the entire code. This code is for a popup window.

    The
    Code:
    				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ){ executeSearch( event ); };
    can be found near the bottom.

    I did not post the entire code earlier because my code does too many things in one page.

    The "Enter" key is used at two places: in the input text field and in the table. But they perform different functions. In the input field, the "Enter" invokes a filter search. In the table, the "Enter" key closes the popoup window and pass the code of the selected row to the parent window. The "Enter" key in the table works as expected. I cannot capture the result of the "Enter" key in the input text field although it performs the function.

    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    		<link rel="stylesheet" type="text/css" href="theme/booking/Master.css" title="Style">
    		<style>
    			a { text-decoration: none; color: #000000; }
    		</style>
    	    <script language="JavaScript1.1" type="text/javascript" src="common/filterTable.js"></script>
            <script language="JavaScript1.1">
    
    			var firstRow = 1;
    			var currentRow;
    			var highlightedRow;
    			var clicked = 0;	
    			var selected = 0;			
    			var VISIBLE_ROWS = 10;
    			
    			window.onload = function()
    			{
    				document.getElementById("countriesList:filter").value = window.opener.document.getElementById("vr:subjectCitizenOf").value;
    				filterTable_clickButton( 'countriesList:filter',  'countriesList:countryTable' );
    			}
    
    			function ValidateBlankField()
    			{
    				var filterCriterion = document.getElementById('countriesList:filter');
    				
    				// Check the value of the element named filter
    				// from the form named genderTypes
    				if ( filterCriterion.value.replace(/^\s+/,"") == "" )
    				{
    					// If null display and alert box
    					alert( "Please provide filter criterion." );
    					// Place the cursor on the text field for revision
    					filterCriterion.focus();
    					// return false to stop further processing
    					return (false);
    				}
    				// If filter is not null continue processing
    				filterTable_clickButton( 'countriesList:filter',  'countriesList:countryTable' );
    			}
    
    			function addOnclickToDatatableRows() 
    			{
    			    var trs = document.getElementById( 'countriesList' ).getElementsByTagName( 'tr' );
    			    for (var i = 0; i < trs.length; i++) 
    			    {
    			        trs[i].onclick = new Function( "highlightRow( this )" );  			        
    			    }
    			}
    
    			function selectRow( row )
    			{
    			 	dehighlightRow( highlightedRow );
    			    row.bgColor = ( row.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
    			    highlightedRow = row;
    			    clicked = 1;
    			}
    
    			function highlightRow( tr ) 
    			{
    
    				if ( currentRow == null )
    				{	
    				    tr.bgColor = ( tr.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
    				    highlightedRow = tr;
    				} 
    				else
    				{
    				 	dehighlightRow( highlightedRow );
    				    tr.bgColor = ( tr.bgColor != '#0000ff' ) ? '#0000ff' : '#ffffff';
    				    highlightedRow = tr;
    				    // currentRow = tr.rowIndex;
    				}
    			}
    
    			function dehighlightRow( tr ) 
    			{
    		    	tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
    			}
    			
                function chooseCountry() 
    			{
    				if (opener && !opener.closed)
    				{ //check if opener is still open
    					if ( highlightedRow ) 
    					{
    			          var selectedCountry = highlightedRow.getElementsByTagName('td')[0].innerHTML;
    			          window.opener.document.getElementById("vr:subjectCitizenOf").value = selectedCountry;
    			          window.opener.focus();
    					}
    					else 
    					{
    				        alert( "Please select a row." );
    				        return;
    				    }
    				}
    				clearInputText()
    				self.close();
                } 
    
    			function clearInputText()
    			{
    			    var inputText = document.getElementById("countriesList:filter");
    			    inputText.value == '';
    			} 
    
    			function executeSearch( e )
    			{
    				if ( zxcEventObj(e).id != 'countriesList:filter' ) return false
    			
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				switch (keyID)
    				{
    					case 13:
    					ValidateBlankField();
    					return false;
    					break;
    				}							
    			}
    
    			function processKeys( e ) 
    			{ 
    				if ( zxcEventObj(e).tagName != 'BODY' ) return false
    			
    				var div = document.getElementById( 'container' );
    				var table = document.getElementById( 'countriesList:countryTable' );
    				var trs = document.getElementById('countriesList').getElementsByTagName('tr');
    				var numRows = table.rows.length;
    				var threshold = 7;
    				var rowsPerPage = 9;
    				var keyID = (window.event) ? event.keyCode : e.keyCode;
    				
    				switch (keyID)
    				{
    					// Enter Key
    					case 13:
    					chooseCountry();
    					return false;
    					break;
    				
    					// Page Up Key
    					case 33:
    					var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// there is only one page.
    						currentRow = firstRow;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow - 1 ].offsetTop;
    						return false;
    					} else if ( parseInt( currentRow ) <= parseInt( rowsPerPage ) )
    					{
    						// reached the first page.
    						currentRow = firstRow;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow - 1 ].offsetTop;						
    						return false;
    					} else
    					{
    						if ( parseInt( currentRow ) > parseInt( lastPageFirstRow ) )
    						{
    							currentRow = lastPageFirstRow;
    						} else if ( parseInt( currentRow )== parseInt( lastPageFirstRow ) )
    						{
    							currentRow -= threshold;
    						} else
    						{
    							currentRow -= threshold;
    							var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
    							currentRow = nextPageFirstRow;						
    						}
    						scrollPage( currentRow );
    						return false;
    					}				
    					break;
    
    					// Num Pad 9 (PgUp) Key
    					case 105:
    					var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// there is only one page.
    						currentRow = firstRow;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow - 1 ].offsetTop;
    						return false;
    					} else if ( parseInt( currentRow ) <= parseInt( rowsPerPage ) )
    					{
    						// reached the first page.
    						currentRow = firstRow;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow - 1 ].offsetTop;						
    						return false;
    					} else
    					{
    						if ( parseInt( currentRow ) > parseInt( lastPageFirstRow ) )
    						{
    							currentRow = lastPageFirstRow;
    						} else if ( parseInt( currentRow )== parseInt( lastPageFirstRow ) )
    						{
    							currentRow -= threshold;
    						} else
    						{
    							currentRow -= threshold;
    							var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
    							currentRow = nextPageFirstRow;						
    						}
    						scrollPage( currentRow );
    						return false;
    					}				
    					break;
    					
    					// Page Down Key
    					case 34:
    					var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// there is only one page.
    						var lastRow = numRows - 1;
    						currentRow = lastRow;
    						highlightRow( trs[ currentRow ] );							
    						return false;
    					} else if ( parseInt( currentRow ) == parseInt( ( lastPageFirstRow - threshold ) ) ) 
    					{
    						// NOT WORKING.  
    						currentRow += threshold;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow -1 ].offsetTop;	
    						return false;
    					} else if ( parseInt( currentRow ) >= parseInt( lastPageFirstRow ) )
    					{					
    						// reached last page.
    						var lastRow = numRows - 1;
    						currentRow = lastRow;
    						highlightRow( trs[ currentRow ] );
    						return false;
    					} else
    					{
    						if ( ( currentRow%threshold ) == 0 )
    						{
    							var nextPageFirstRow = currentRow + 1;
    							currentRow = nextPageFirstRow;
    						} else
    						{
    							currentRow += threshold;
    							var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
    							currentRow = nextPageFirstRow;
    						}
    						scrollPage( currentRow );
    						return false;
    					}
    					break;
    
    					// Num Pad 3 (PgDn) Key
    					case 99:
    					var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// there is only one page.
    						var lastRow = numRows - 1;
    						currentRow = lastRow;
    						highlightRow( trs[ currentRow ] );							
    						return false;
    					} else if ( parseInt( currentRow ) == parseInt( ( lastPageFirstRow - threshold ) ) ) 
    					{
    						// NOT WORKING.  
    						currentRow += threshold;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ currentRow -1 ].offsetTop;	
    						return false;
    					} else if ( parseInt( currentRow ) >= parseInt( lastPageFirstRow ) )
    					{					
    						// reached last page.
    						var lastRow = numRows - 1;
    						currentRow = lastRow;
    						highlightRow( trs[ currentRow ] );
    						return false;
    					} else
    					{
    						if ( ( currentRow%threshold ) == 0 )
    						{
    							var nextPageFirstRow = currentRow + 1;
    							currentRow = nextPageFirstRow;
    						} else
    						{
    							currentRow += threshold;
    							var nextPageFirstRow = currentRow - ( currentRow%threshold ) + 1;
    							currentRow = nextPageFirstRow;
    						}
    						scrollPage( currentRow );
    						return false;
    					}
    					break;
    				
    					// End Key
    					case 35:
    					var lastRow = numRows - 1;
    					currentRow = lastRow;					
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// There is only one page
    						highlightRow( trs[ currentRow ] );						
    					} else
    					{
    						var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ lastPageFirstRow ].offsetTop;
    					}
    					return false;
    					break;
    
    					// Num Pad 1 (End) Key
    					case 97:
    					var lastRow = numRows - 1;
    					currentRow = lastRow;					
    					if ( parseInt( numRows ) <= parseInt( rowsPerPage ) )
    					{
    						// There is only one page
    						highlightRow( trs[ currentRow ] );						
    					} else
    					{
    						var lastPageFirstRow = numRows - ( numRows%threshold ) + 1;
    						highlightRow( trs[ currentRow ] );
    						div.scrollTop = trs[ lastPageFirstRow ].offsetTop;
    					}
    					return false;
    					break;
    
    					// Home Key
    					case 36:
    					currentRow = firstRow;
    					highlightRow( trs[ currentRow ] );
    					div.scrollTop = trs[ currentRow - 1 ].offsetTop;
    					return false;
    					break;
    
    					// Num Pad 7 (Home) Key
    					case 103:
    					currentRow = firstRow;
    					highlightRow( trs[ currentRow ] );
    					div.scrollTop = trs[ currentRow - 1 ].offsetTop;
    					return false;
    					break;					
    										
    					// Upward Arrow Key
    					case 38:
    					if ( parseInt( currentRow ) == parseInt( 1 ) ) 
    					{
    						// reached the top of the table; do nothing.
    						return true;
    					} else 
    					{
    						// move one row up.
    						currentRow--;
    				        highlightRow( trs[ currentRow ] );
    				        if ( currentRow%threshold == 0 )
    				        {
    							scroll( -1, currentRow, threshold );
    						}
    						return false;
    					}
    					break;
    
    					// Num Pad 8 (Upward Arrow) Key
    					case 104:
    					if ( parseInt( currentRow ) == parseInt( 1 ) ) 
    					{
    						// reached the top of the table; do nothing.
    						return true;
    					} else 
    					{
    						// move one row up.
    						currentRow--;
    				        highlightRow( trs[ currentRow ] );
    				        if ( currentRow%threshold == 0 )
    				        {
    							scroll( -1, currentRow, threshold );
    						}
    						return false;
    					}
    					break;					
    			
    					// Downward Arrow Key
    					case 40:
    					if ( parseInt( clicked )  == parseInt( 1 ) )
    					{
    						currentRow = highlightedRow.rowIndex;
    						clicked = 0;
    						return false;
    					}
    					if ( currentRow == ( numRows - 1 ) )
    					{
    						// reached the end of the table; do nothing
    						return true;
    					} else 
    					{ 
    				        currentRow++;
    				        highlightRow( trs[ currentRow ] );
    					    if ( currentRow%threshold == 1 )
    					    {
    							scroll( 1, currentRow - 1, threshold );
    					    }
    					    return false;
    					}
    					break;
    					
    					// Num Pad 2 (Downward Arrow) Key
    					case 98:
    					if ( currentRow == ( numRows - 1 ) )
    					{
    						// reached the end of the table; do nothing
    						return true;
    					} else 
    					{ 
    				        currentRow++;
    				        highlightRow( trs[ currentRow ] );
    					    if ( currentRow%threshold == 1 )
    					    {
    							scroll( 1, currentRow - 1, threshold );
    					    }
    					    return false;
    					}
    					break;					
    				}
    				
    				function scroll( dir, current, nbr )
    				{
    					for ( var r = 0; r < trs.length; r++ )
    					{
    					    if ( ( trs[r].offsetTop + trs[r].offsetHeight ) > div.offsetHeight) break;
    					}
    					if ( dir == 1 )
    					{
    						div.scrollTop = trs[ current ].offsetTop;
    					} else
    					{
    						div.scrollTop = trs[ current + dir*nbr ].offsetTop;
    					}	
    				}
    					     
    				function scrollPage( current )
    				{ 
    					highlightRow( trs[ current ] );
    					div.scrollTop = trs[ current - 1 ].offsetTop;					
    				}
    			}
    			
    			function zxcEventObj(zxce)
    			{
    				var zxceobj;
    				if (!zxce) var zxce=window.event;
    				zxce.cancelBubble=true;
    				if (zxce.stopPropagation) zxce.stopPropagation();
    				if (zxce.target) zxceobj=zxce.target;
    				else if (zxce.srcElement) zxceobj=zxce.srcElement;
    				if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
    				return zxceobj;
    			}
    
    			function resetTextField( form, field ) 
    			{
    				fieldName = "countriesList" + ":" + "filter";
    				form[fieldName].value = "";
    			}      
                            
            </script>
    		<title>Subject's Country of Citizenship</title>
    	</head>
    	<f:view>
    		<body class="bodyDefault">
    			<h:form id="countriesList">
    				<p>
    				<p>
    				<div align="center">
    					<h:outputText value="Find  " styleClass="textDefault"/>
    					<h:inputText id="filter" style="width:25em;" styleClass="withoutTextDefault" onkeypress="executeSearch( event )"/>
    					<p>
     						<div style="height:12em; width:20em;" id="container" class="scrollbar"> 
    							<h:dataTable value="#{countriesManagementBean.countriesList}" var="country" 
    									id="countryTable" styleClass="lovTableDefault"
    									border="0" cellspacing="1" bgcolor="#FFFFFF" 
    									headerClass="tableHeaderDefault" columnClasses="codeColumn, descriptionColumn" 
    									onkeydown="processKeys( event )" onmouseup="selectRow( this )"
    									ondblclick="addOnclickToDatatableRows();chooseCountry()">
    							 <h:column>
    							   <f:facet name="header">
    							     <h:outputText style="width:7em;" value="Code"/>
    							   </f:facet>
    								<h:outputText value="#{country.code}"/>
    							 </h:column>
    							 <h:column>
    							   <f:facet name="header">
    							     <h:outputText style="width:30em;" value="Description"/>
    							   </f:facet>
    							   <h:outputText value="#{country.description}"/>
    							 </h:column>
    							</h:dataTable>
    						</div>
    						<f:verbatim>
    						    <script>
    								addOnclickToDatatableRows();		
    						    </script>
    						</f:verbatim>
    				</div>
    				<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">			
    					<tr><td><br/></td></tr>	
    					<tr>
    						<td>
    							<table align="center" width="20%">	
    								<tr>
    									<td>		         
    										<h:commandButton type="button" value="Find" 
    										                  styleClass="buttonDefault" onclick="ValidateBlankField()"/>
    									</td>
    									<td style="width:1em;"><br/></td>
    									<td>
    										<h:commandButton value="OK"
    										                  onclick="chooseCountry()" styleClass="buttonDefault"/>
    									</td>
    									<td style="width:1em;"><br/></td>
    									<td>
    										<h:commandButton value="Cancel" onclick="self.close()" styleClass="buttonDefault"/>
    									</td>
    								</tr>
    							</table>
    						</td>
    					</tr>				
    				</table>
    			</h:form>
    			<script language="JavaScript1.1">
    				var table = document.getElementById( 'countriesList:countryTable' );
    				var trs = table.getElementsByTagName( 'tr' );
    				highlightRow( trs[ firstRow ] );
    				trs[ firstRow ].focus();
    				currentRow = trs[ firstRow ].rowIndex;
    				document.onkeydown = function( event ){ processKeys(event); };
    				document.onkeypress = function( event ){ executeSearch( event ); };
    			</script>			
    		</body>
    	</f:view>
    </html>

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi VW, please kindly take a look at my code and provide instructions on how to handle the problem. Thank you.

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    I have looked at your code but am afraid I can't help you.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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