Highlighting the name from navigation list of employee name from <li>

newphpbees · December 13, 2011

Hi

I have a navigation list of Employee Names at the left side of my webpage and I used onclick for choosing employee and displaying his data at the center page.

Now, I want to highlight the employee names and display his data without using mouse or without clicking employee name.

Is it possible right? but how??Somebody told me to used onkeyup?? but when i change the onclick to onkryup it did not work.

Here is my code for search.php:

<?php

session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.')  LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

  echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
  //echo "<li onkeyup=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();    
?>

when i tried to change from onclick to onkeyup code:

echo "<li onkeyup=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";

it did not work.

here is the javascript code and the template for displaying employee name list:

<html>
<head>
<title></title>
<script>
function searchemppay(queryString) {
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
         
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    }

    var url = "search.php?query=" + queryString;
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;
}
</script>

</head>
<body>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >
<hr />
<ul>
{section name=co_emp loop=$personalAll}
<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>
<!--<li onkeyup="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

</body>
</html>

and here is the code for SearchData.php

<?php
session_start();

$queryStr = trim($_GET["queryEmpID"]);

$SSSAmor = $_GET['SSSAmor'];

$_SESSION['empID'] = $queryStr; 

session_write_close();
header("Location:DisplayEmpPayroll.php");
exit();
?>

and here is my css code

#Search {
position:absolute;
left: 10px;
top: 60px;
}

#Search form{
margin: 0px;
padding: 0px;
}

#Search label {
display: block;
float: left;
}

#Search ul a:link, #Search ul a:visited {display: block;}
#Search ul {list-style: none; margin: 0; padding: 0;}

#Search li {border-bottom: 1px solid #EEE;}

#Search li:hover {background:#00FF00;}
#Search li a:focus {background:yellow;}

<!--Search Payroll-->
#searchpayroll{
position: relative;
margin-left: 10px;
top: 0px;
width: auto;
/*display:inline;*/
}
#searchpayroll h3{
padding: 10px 0px 2px 10px;
}

#searchpayroll a:link{
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
/* voice-family: "\"}\""; 
  voice-family:inherit;*/
width: auto;
}

#searchpayroll a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#searchpayroll a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
}

If you have any question for further understanding of my post feel free to ask me..

Any help is highly appreciated..

Thank you in advance

teynon · December 13, 2011

You want them to be able to pick an employee using the up and down arrows? onKeyUp event requires focus. You'll have to add an event listener and then process what to do with it in a javascript header script.

Heres a random relevant google tutorial:

http://www.howtocreate.co.uk/tutorials/javascript/eventinfo

newphpbees · December 13, 2011

Yes using Up and Down Arrows...

Event handler???

newphpbees · December 13, 2011

Is it possible that I could change onclick to onkeyup?

tHANK YOU

newphpbees · December 13, 2011

I don't know where can i add event for onkeyup in this code:

<script>
function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;
}
</script>

Thank you

newphpbees · December 14, 2011

Actually i used template.

my javascript is in header.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  -->
<!--<html xmlns="http://www.w3.org/1999/xhtml"> -->
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />--> 
<title>DSPI Payroll System</title> 

<link rel="stylesheet" type="text/css" href="paycss.css" />

<script>
function searchemppay(queryString) {

    
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    }
    var url = "search.php?query=" + queryString; 
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;

}
</script>

<body onload="document.forms[0].reset()">
<form name="sampleform" method="post" enctype="multipart/form-data">
<h2 class="sysname"> Payroll System </h2>
</div>
<div class="btn">
<input type="button" name="General" value="General" onclick="displaygeneral()">
<input type="button" name="Attendance" value="Attendance" onclick="attendance()">
<input type="button" name="OT" value= "OT Form" onclick="OtFrm()">
<input type="button" name="loan" value= "Loan Form" onclick="loanFrm()">
<input type="button" name="logout" value="Log Out" onclick="payOut()">
</div>

left.tpl //where the name list display here:

<script>
document.onkeyup = function(e){
  e = window.event || e;
  var key = e.charCode || e.keyCode;
  if (key == 38) {
    // up pressed
  }
  else if (key == 40) {
    // down pressed
  }
}
</script>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
<hr />
<ul id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px">
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<li><a href="SearchData.php?queryEmpID=$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

and here is the search.php

<?php     
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {
$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

    echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();   
?>

and the SearchData.php

<?php
session_start();

$queryStr = trim($_GET["queryEmpID"]);

$_SESSION['empID'] = $queryStr; 

session_write_close();
header("Location:DisplayEmpPayroll.php");
exit();
?>

yet, the onkeyup did not work..what's wrong in my code?

Thank you

newphpbees · December 19, 2011

Hi...

I already solved the issue in displaying the employee name.

This is my revised code:

<script>
window.onload = function() {
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;

  document.onkeyup = function(e){
    e = window.event || e;
    var key = e.charCode || e.keyCode;
    //if (key == 38) {
      if (key == 40) { 
      // up pressed
      //if (i < links.length - 1) i++;
      if (i < links.length - 1) i++; 
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
     // if (i < 0) i++; 
    }
    // focus on link
    links[i].focus();
    // request content in here for link with ajax
   // alert(links[i].href);
  }
}
</script>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
<hr />
<ul id="searchpayroll" style="overflow:auto; height:385px; width:auto; margin-left:2px;">
<!--<ul>-->
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li> -->
<li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

and now I encountered problem when I type in search text area..after I type one letter it was focus in the first name in the list...

I think i had a problem in my script..but I can't figured out now..

Thank you...

Sign In

Highlighting the name from navigation list of employee name from <li>

Recommended Posts

newphpbees

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

newphpbees

Link to comment

Share on other sites

newphpbees

Link to comment

Share on other sites

newphpbees

Link to comment

Share on other sites

newphpbees

Link to comment

Share on other sites

newphpbees

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information