Get ID of clicked

Question

I have a dropdown list of items:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
</ul>

.. where the generated elements look like this:

<li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

.. and I want to display database entries on my website, depending on the selected <li> item's ID:

$(document).ready(function(){
  $("#Room").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "GetRoomComponents.php?q=1", true);
    xmlhttp.send();
  });
});

The 1 of GetRoomComponents.php?q=1 needs to be replaced with the <li>'s ID. But how do I access the correct one?

This answer https://stackoverflow.com/a/3545356/5790966 (replacing "#Room" with "#Room li") didn't work. If I do that, the entire function doesn't execute (tested on the latest Chrome).

Id cant be Room 1, must be Room_1 or Room1. No spaces No rare characters. And with $(this).attr('id') you can get the ID of the clicked element — Roy Bogado, Jul 27 '17 at 09:23
My teacher gave me a task to create a HTML/PHP website and I asked if I can use JS to make it more pretty/responsive etc. (because I wanted to learn it anyway). What I didn't consider was the amount of time and now I'm in a big hurry (which leads to mistakes like the space after `Room`). Anyway, thanks to all the answers! — CookedCthulhu, Jul 27 '17 at 10:21

score 2 · Accepted Answer · answered Jul 27 '17 at 09:18

Firstly, you may as well use jQuery to make your AJAX request if you've already got it loaded; it's much simpler logic.

To address your issue, you can attach a delegated click() handler to all the li a elements, then use the this keyword to reference the one which raised the event. You can then read the prop('id') from the parent li. Try this:

$("#Room").on('click', 'li a', function(e) {
  e.preventDefault();
  var liId = $(this).closest('li').prop('id');
  $('#accordion').load('GetRoomComponents.php?q=' + liId);
});

score 1 · Answer 2 · answered Jul 27 '17 at 09:17

Since you are clicking on li a element, use it as click event in jQuery.

jQuery('#Room').on('click', 'li a', function() {
    var liId = jQuery(this).parent().attr('id').replace('Room ', ''); //Read ID of current pressed LI:

    console.log(liId); Prints either 1 or 2
});

ADyson · Answer 3 · 2017-07-27T09:24:07.443

Don't handle click on "Room" because that doesn't give you access to the child element which may have been a target of the click as well.

Instead you can do it on the "LiRoom" class.

$(".LiRoom").click(function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

Note that your IDs are invalid - they cannot have spaces in them. Amending them to the form RoomX e.g. Room1, Room2, will conform to the HTML spec.

N.B. If the <li> elements are created after the page loads (and therefore after the click event handler has been initialised), then you can use delegated event handling, which will pick up any elements matching the secondary selector which are added later. Like this:

$("#Room").on("click", ".LiRoom", function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

Here's a working example:

$(function() {
  $("#Room").on("click", ".LiRoom", function() {
    var id = $(this).attr("id"); //gets you the Id of the clicked element
    alert(id); //just for demo
    //...then your ajax code goes here
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
  <li class='LiRoom' id='Room1'><a href='#'>R101</a></li>
  <li class='LiRoom' id='Room2'><a href='#'>R102</a></li>
</ul>

score 0 · Answer 4 · answered Jul 27 '17 at 09:19

0

Send event to your function like

$("#Room").click(function(e) {
    console.log(e.target.id);
....

answered Jul 27 '17 at 09:19

tanaydin

5,171
28
45

score 0 · Answer 5 · answered Jul 27 '17 at 09:20

Try attaching your event handler to the li instead of the #room, so you can capture $(this) id.

Also, ad mentioned above: If you're using jQuery, also use its AJAX features.

Also #2: Make sure your IDs are valid, spaced in IDs are not valid.

$(document).ready(function(){
  $("#Room li").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
 console.log($(this).attr('id'));
    xmlhttp.open("GET", "GetRoomComponents.php?q=" + $(this).attr('id'), true);
    xmlhttp.send();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content --><li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

Get ID of clicked

5 Answers5