Jump to content

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

newphpbees

By newphpbees
in Javascript Help

 Share

Recommended Posts

newphpbees Member

newphpbees

Posted
Posted

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 Member

teynon

Posted
Posted

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 Member

newphpbees

Posted
  • Author
Posted

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 Member

newphpbees

Posted
  • Author
Posted

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.