Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

highlight the name that was choose

ajax

  • Please log in to reply
31 replies to this topic

#25 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 21 December 2011 - 10:39 PM

hi..

can you tell me...where part in my script should i replace your suggested script?

var pointer = i???

thank you
  • 0

#26 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 21 December 2011 - 10:51 PM

var pointer= 0;
, at the very top of the script, like right before window.onload=... but on its own line.

As for the rest:
// code for when the up arrow key is pressed... 
// ... the code you have already ... 
[COLOR=#888800]if (pointer) pointer--; 
else pointer= links.length - 1; 
links[pointer].focus (); [/COLOR]

// code for when the down arrow key is pressed... 
// ... the code you have already ... 
[COLOR=#008888]if (pointer + 1 < links.length) pointer++; 
else pointer= 0; 
links[pointer].focus ();[/COLOR]

...

...
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();    
[COLOR=#888800]the up key code...[/COLOR] 
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
      links[i].focus(); 
     // if (i < 0) i++; 
[COLOR=#008888]the down key code...[/COLOR]
    }
    // focus on link
    
    // request content in here for link with ajax
   // alert(links[i].href);  */

}
...
...


Though after looking again at the code you posted before this, it seems that you already have something similar to what I posted, so I don't think you have to insert the code I last posted, unless you want to.

Try removing the part(/s) in red, to see if the code works:
<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 type="text/javascript"> 
[COLOR=#FF0000]document.getElementById ("something_a").focus (); [/COLOR]
</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> -->
<li><a [COLOR=#FF0000]id="something_a"[/COLOR] 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>

I seem to be messing up a lot, lately :D ; saying to add something, and then saying to remove it ... :D .
  • 0

#27 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 21 December 2011 - 11:12 PM

this is my code now:
<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) { 
      if (i < links.length - 1) i++; 
        links[i].focus();    
    }
    else if (key == 38) {
      if (i > 0) i--;
      links[i].focus(); 
    }
}
}
 </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> -->
<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 highlight color was gone after i press enter.

Thank you for your help
  • 0

#28 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 22 December 2011 - 01:15 AM

Wouldn't it be easier to use a multi-row select box instead, and remove all borders and set the right colors on it, then you've got it's functionality, and looks like normal webpage?
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#29 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 22 December 2011 - 08:53 PM

How????


Thank you
  • 0

#30 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 23 December 2011 - 04:42 PM

<select size="5">
makes it 5 rows high. Them format it with css so it looks as integrated in page. Just set the number of rows dynamically with your php.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#31 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 23 December 2011 - 05:20 PM

what do you mean <select>?

you mean instead of using <ul><li> i use <select>?

in my other <a href> the higlight yellow if it is active was work...:(

Not only in <li> part:(

Thank you
  • 0

#32 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 25 December 2011 - 03:22 PM

Select is a tag creating a drop down menu, but if you set a size, you get a picklist of many rows. Using a select, you could use the onchange attribute to throw an script into action to do what you want, and don't need to think sbout setting colors and stuff in your script. You don't need to fix with keypresed and stuff either, as it's handled by the browser.
Example:
<select name="emp">
<option value="1234">John Doe</option>
<option value="4321">Jane Doe</option>
</select>

  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download