CODEWITHSUNDEEP
javascriptjqueryjsp
Uday Khatry
Uday Khatry

Reputation: 469

Need to get the "id" attribute of <a> tag using JS

My JSP has a tag whose id is getting populated dynamically:

c:forEach var="advisor" items="${advisors}">

<a  id="${advisor.getAdvisorId()}" href="#" onclick="GetAdvisorReview()" data-toggle="modal" data-target="#datepay">img  src="assets/img/services/Icon_Reviews.png" width="50" alt="">/a>

</c:forEach>

JS:

function GetAdvisorReview(){
    var domElement =$(event.target);
    console.log(domElement.attr('id'));

    alert($(this).attr('id'));
    alert(this.id);
    alert(event.target.id);
}

Every alert is giving undefined.Please tell me what is wrong with the code.Thanks in advance!!!!

Upvotes: 0

Views: 88

Answers (4)

Joce Pedno
Joce Pedno

Reputation: 334

If you want to have the sender element and the event object, you should do this instead:

<a  id="${advisor.getAdvisorId()}" href="#" onclick="GetAdvisorReview(this, event)" data-toggle="modal" data-target="#datepay">img  src="assets/img/services/Icon_Reviews.png" width="50" alt="">/a>

Then you can access them like that:

function GetAdvisorReview(sender, e){
    alert(sender.id);
    alert(e.target.id);
}

Upvotes: 0

Marventus
Marventus

Reputation: 874

Wilfredo P's is a good approach, but I would suggest to avoid using inline JS by adding a CSS class to all your links and to use addEventListener() (pure JS) or .on() (jQuery) to bind the click event:

JSP:

c:forEach var="advisor" items="${advisors}">

<a  id="${advisor.getAdvisorId()}" class="someClass" href="#" onclick="GetAdvisorReview()" data-toggle="modal" data-target="#datepay">img  src="assets/img/services/Icon_Reviews.png" width="50" alt="">/a>

</c:forEach>

Pure JS:

var elems = document.getElementsByClassName("someClass");
for ( i=0; i<elems.length; i++ ) {
    elems[0].addEventListener("click", function() {
       alert( elems[0].getAttribute("id") );
    });
}

jQuery:

// jQuery
$(document).ready(function() {
    $(".someClass", this).on("click", function() {
        alert( $(this).attr("id") );
    });
});

Demo:

// Pure JS
var elems = document.getElementsByClassName("someClass-js");
for ( i=0; i<elems.length; i++ ) {
   elems[0].addEventListener("mouseup", function() {
     alert( this.getAttribute("id") );
   });
}

// jQuery
$(document).ready(function() {
    $(".someClass-jquery", this).on("click", function() {
        alert( $(this).attr("id") );
    });
});
a {
  display: block;
}
p {
  margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>With Pure JS:</p>
<a id="some-link-1" class="someClass-js" href="#">Some Link 1</a>
<a id="some-link-2" class="someClass-js" href="#">Some Link 2</a>
<p>With jQuery:</p>
<a id="some-link-3" class="someClass-jquery" href="#">Some Link 3</a>
<a id="some-link-4" class="someClass-jquery" href="#">Some Link 4</a>

Upvotes: 0

BReal14
BReal14

Reputation: 1584

You have HTML markup errors in your loop. I'm assuming those are SO pasted typos only. Otherwise, fix those as well as my code block displays.

An event listener solution is the approach I would take.

remove the onclick, replace it with a class:

 <c:forEach var="advisor" items="${advisors}">
    <a  id="${advisor.getAdvisorId()}" href="#" class="advisors" data-toggle="modal" data-target="#datepay">
      <img  src="assets/img/services/Icon_Reviews.png" width="50" alt="">
    </a>
 </c:forEach>

and then listen for that class click event to happen

$(".advisors").click(function() {
   alert($(this).attr('id'));
});

demo:
http://jsfiddle.net/pcx6csph/1/

Upvotes: 0

Wilfredo P
Wilfredo P

Reputation: 4076

Try using this inside the onclick()

<a  id="${advisor.getAdvisorId()}" href="#" onclick="GetAdvisorReview(this)" data-toggle="modal" data-target="#datepay">img  src="assets/img/services/Icon_Reviews.png" width="50" alt="">/a>

And the Js should be:

    function GetAdvisorReview(e){
        alert(e.id); //Get the Id
    }

Where the e is the element that fired the event.

Upvotes: 3

Related Questions