1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Web Design, HTML And CSS' started by newphpcoder, Dec 13, 2011.

  1. newphpcoder

    newphpcoder New Member

    Joined:
    Sep 24, 2010
    Messages:
    101
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Web Programmer
    Location:
    Philippines
    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:
    Code:
    <?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:
    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:
    Code:
    <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
    Code:
    <?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
    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
     

Share This Page