0

I am a newbie with jquery. I have a table as follows:

<td id="dropmenu">
    <?php echo $user->first_name;?>
</td>

<td id="dropmenu" >
    <?php echo $user->last_name; ?>
 </td>

 <td>
    <?php echo $user->email; ?>
 </td>

 <td id="userid">
    <?php echo  $user->userid; ?>
 </td>

In my js file, I have the following. I under #dropdown I add a edit and delete link. I need to get the userid from the row to put in the edit link like Edit. Everything works, but I cannot figure out how to get the userid number. 

$(document).ready(function() {
$("#table-list-users tr td#dropmenu").hover(function(){

    // get the value of the row id.  This will be used in the edit href later on
    var data = $(this).parent('td#userid').text();
    console.log(data);

    $(this).append('<div> <a href="/edit/data <-that will be the id">edit</a> | view | delete </div>') }, function(){
        $(this).children("div").remove();
    })
});
spreaderman
  • 918
  • 2
  • 10
  • 39
  • 7
    For starters you can't repeat ID's in a page. They are unique by definition – charlietfl Mar 20 '19 at 11:53
  • 1
    You can use `` to store the `id` in a data-attribute. Get it using something like `$(this).data('user-id')` – brombeer Mar 20 '19 at 11:57
  • The ID's are unique. That html/php is in a foreach loop echoing out all the records in a long list. – spreaderman Mar 20 '19 at 11:57
  • "_The ID's are unique_" They are not: `` – brombeer Mar 20 '19 at 11:58
  • I tried $(this).data('user-id') idea before. It seems that because I am already in the td#dropmenu, $this is refering to that . It seems I have to go up a level and come down to get id but don't know how to do. – spreaderman Mar 20 '19 at 11:59
  • They are: id; ?> Maybe I should have used userid like in my example – spreaderman Mar 20 '19 at 12:00
  • Your `$user->id`s might be unique, the values of your `id` attributes of your HTML elements are not! `id="dropmenu"` is there twice, if they are inside a loop probably even more – brombeer Mar 20 '19 at 12:02
  • So how do I get the value of userid from that particular row? The dropdown attaches itself to two first_name and last_name. That works. I need to get the value of userid. – spreaderman Mar 20 '19 at 12:04
  • if they are in a loop, even `#userid` will be duplicate. Use `class` instead of `id`. then do something like `$('#table-list-users').on('hover', 'td', function(e) {if($(this).hasClass('dropmenu)) {let userid = $(this).closest('tr').find('.userid').text(); // do whatever you want with userid here}})` – Fr0zenFyr Mar 20 '19 at 12:15
  • Perfect. That works. Thank you very much Fr0zenFyr – spreaderman Mar 20 '19 at 12:22
  • @spreaderman might be helpful, but why don't you get your PHP to construct the edit buttons e.g. add `
    edit ...
    ` Then just use CSS to show and hide on hover. Note I have changed `dropmenu` to a class to avoid duplicate id's in the html, so the CSS would be something like: `.actions { display: none; }` `#table-list-users tr td.dropmenu:hover .actions { display: block; }`     – PanPipes Mar 20 '19 at 12:42
  • Thank you Panpipes. That is probably a thinner solution, too. Thanks. Will try that. – spreaderman Mar 21 '19 at 01:04
  • I am also using datatables. I noted that while using the jquery solution, the dropdown will only appear on the first page of results. I can see the dropdown only for results 1 to 10. When I go to page 2, there are no dropdown menus activated when I hover over. – spreaderman Mar 21 '19 at 01:07

0 Answers0