SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem in onkeyup event

    Hi...

    i got problem in using this code:

    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 == 40) { 
          // up pressed
          if (i < links.length - 1) i++; 
        }
        else if (key == 38) {
          // down pressed
          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>
    the problem is...when I type in search textfield it focus in the name list..like for example i type a after I press a it was focus in the firstname, which is wrong..

    I think it cause from the javascript code..

    I want to happen is i continue typing in search textfield.

    Thank you

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    where is the searchemppay() function?

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the javascript:

    Code:
    <script>
    function searchemppay(queryString) {
      //alert(queryString);
        
        var ajaxRequest = remoteRequestObject();
        ajaxRequest.onreadystatechange = function() {
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                var result = ajaxRequest.responseText;
                //alert(result);
                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>
    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 LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";
    }
    
    $recPersonalQuery = $conn->Execute($sql);
    if (!$recPersonalQuery->BOF) {
        $recPersonalQuery->MoveFirst();
    }
    
    echo "<hr />";
    echo "<ul id='searchpayroll'>";
    
    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 "<a href='SearchData.php?queryEmpID=$empID'; style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
        echo "<hr />";
        $recPersonalQuery->MoveNext();
    } 
    echo "</ul>";
    
    $recPersonalQuery->Close();
    
    exit();    
        
    ?>
    SearchData.php

    Code:
    <?php
    session_start();
    
    $queryStr = trim($_GET["queryEmpID"]);
    
    $_SESSION['empID'] = $queryStr; 
    
    session_write_close();
    header("Location:DisplayEmpPayroll.php");
    exit();
    ?>

    Thank you so much..

    my problem is in typing textarea...I think it cause from my script in keycode for up and down?

  4. #4
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before I used this script for up and down key in choosing employee name I don't have problem in searching employee name:

    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 == 40) { 
          // up pressed
          if (i < links.length - 1) i++; 
        }
        else if (key == 38) {
          // down pressed
          if (i > 0) i--;
        }
        // focus on link
        
        
       links[i].focus();
       
        // request content in here for link with ajax
       // alert(links[i].href);
      }
    }
    </script>
    Thank you...

    I tried to edit that code but I the key event didi not work...

    I don't know how can i figured out..

  5. #5
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea on what should I need to change in my script for onkeyup so that my search will work again..

    Thank you so much..

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    The simplest thing is to only focus if it's an up or down keypress.

    Code:
    if (key == 40 || key == 38) {
       links[i].focus();
    }

  7. #7
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when i edit my code:

    Code:
    <script>
    window.onload = function() {   
    // function() { 
      var ul = document.getElementById('searchpayroll');
      var links = ul.getElementsByTagName('a');
      var i = 0;
     
     document.onkeyup = function(e){ 
      //function(e){    
     e = window.event || e;
     // e = e;     
        
       var key = e.charCode || e.keyCode;
       
       /*if (key == 40 || key == 38) {
       links[i].focus();
       } */
    
        //if (key == 38) {
        /* if (key == 40) { 
          // up pressed
          //if (i < links.length - 1) i++;
          if (i < links.length - 1) i++; 
            links[i].focus();    
        }
        else if (key == 38) {
          // down pressed
          if (i > 0) i--;
          links[i].focus(); 
         // if (i < 0) i++; 
        }
        // focus on link
        
        // request content in here for link with ajax
       // alert(links[i].href);  */
    
    }
    }
    </script>
    the up and down key did not work, it was always in the first employee name..:(


    Thank you

  8. #8
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    657
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now, i fix it using this code:
    Code:
    <script>
    window.onload = function() {   
    // function() { 
      var ul = document.getElementById('searchpayroll');
      var links = ul.getElementsByTagName('a');
      var i = 0;
     
     document.onkeyup = function(e){ 
      //function(e){    
     e = window.event || e;
     // e = e;     
        
       var key = e.charCode || e.keyCode;
       
       /*if (key == 40 || key == 38) {
       links[i].focus();
       }  */
    
        //if (key == 38) {
         if (key == 40) { 
          // up pressed
          //if (i < links.length - 1) i++;
          if (i < links.length - 1) i++; 
            links[i].focus();    
        }
        else if (key == 38) {
          // down pressed
          if (i > 0) i--;
          links[i].focus(); 
         // if (i < 0) i++; 
        }
        // focus on link
        
        // 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>
    Thank you so much


Bookmarks

Posting Permissions

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