Home/ Questions/Q 5936301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:22:47+00:00

I’m creating a web page that search users in the database. When I’m typing

  • 0

I’m creating a web page that search users in the database. When I’m typing a username in the search box, it perfectly loads results using Ajax in a table (this table is in another PHP file). But I need to select those rows when I press arrow keys or with mouse over (like Google search engine), when we are pointing to that row, it highlights. I tried with onmouseover function but no luck, but in normal PHP web pages onmouseover works. Here’s what I normally used to select rows in a table.

I’ll give you a very basic example, that how I use this.

<html>
  <head>
    <script type="text/javascript">
      function f1(x){
        document.getElementById(x).style.backgroundColor="#FF0000";<br/>        
      }
      function f2(x){
        document.getElementById(x).style.backgroundColor="#FFFFFF";     
      }
    </script>
  </head
  <body>
    <?php
    echo "<table border='1'>";
    echo "<tr id='tr1' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'> <td>Elephant</td></tr>";
    echo "<tr id='tr2' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Snake</td></tr>";
    echo "<tr id='tr3' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Spider</td></tr>";
    echo "</table>";
    ?>
  </body>
</html>

My problem is, this does not work in an Ajax loaded table. Please help me…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The mouseover event doesn’t work, because you register the event before inserting the HTML.

    The way around it, is by attaching an event handler to the body tag, and then looking at the original source of the element, which is basically what the jquery live method does. That would look like this:

    $(".hoverme").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
      $(this).addClass('selected');
  } else {
      $(this).removeClass('selected');
  }
});

    I’ll see if I find the time to edit this answer for the keyboard control stuff too.

    • 0