How to access variable values from jstl foreach to jQuery

Question

Hello guys this may be easy question but I m finding it quite tricky. Scenario is I m printing all the values from the database table using jstl foreach.

<c:forEach items="${pal}" var="p">
    <tr>
        <td><c:out value="${p.pid}"></c:out></td>
        <td><c:out value="${p.pname}"></c:out></td>
        <td><c:out value="${p.pdesc}"></c:out></td>
        <td><c:out value="${p.pestd}"></c:out></td>
        <td><a id="popa" href="#">Allocate</a></td>
    </tr>
</c:forEach>

And now onclick Allocate button I want that particular pid (i.e suppose there are 1,2,3,...,10 pid so when I click on 4th I should get the 4th pid as a value) in jquery.

But in jQuery when I try to get that value I always got last value in the loop whichever button I click.

In jQuery Section

 $("a#popa").click(function(){

     var input = $("<c:out value='${pid}' />");
     alert(input);

 });

and I also tried this

 <c:forEach var='lang' items='${paramValues.pid}'>
     <label><font color='#00CC00'><c:out value='${lang}'/></font></label>
 </c:forEach>

 but nothing works

Please Help me and guide me how to get the current value of pid on click in jQuery.

jessegavin · Accepted Answer · 2014-05-31 13:13:41Z

3

The value of each id attribute should be unique across the entire DOM. You're using id="popa" in a loop, this means that there will be more than one. When you try to select the id with jQuery it gives you the last one.

I would consider using the following approach. Instead of using an id, use a data-* attribute.

<c:forEach items="${pal}" var="p">
    <tr>
    <td><c:out value="${p.pid}"></c:out></td>
    <td><c:out value="${p.pname}"></c:out></td>
    <td><c:out value="${p.pdesc}"></c:out></td>
    <td><c:out value="${p.pestd}"></c:out></td>
    <td><a data-pid="${p.pid}" href="#">Allocate</a></td>
    </tr>
</c:forEach>

Then you can wire up the click event with something like this.

$("[data-pid]").click(function(){
  var pid = $(this).data("pid");
  alert(pid);
});

answered May 31, 2014 at 13:13

jessegavin

75.9k28 gold badges141 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atiq Over a year ago

Can I please ask one more query how to alert pid aswellas pname, because when I data-name="${p.name}" I m getting warning message Multiple annotations found at this line: - End tag of element <a> - Undefined attribute name (data-pid). - Start tag of element <a>

Atiq Over a year ago

and getting output as undefined for pname

jessegavin Over a year ago

Glad it's working. You should mark this answer as accepted by clicking the √ below the voting controls (to the left my my answer).

Collectives™ on Stack Overflow

How to access variable values from jstl foreach to jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related