PDA

View Full Version : Highlighting the name from navigation list of employee name from <li>


newphpbees
13 Dec 2011, 04:06 AM
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