Question

<c:forEach var="projects" items="${projectList}">
    <tr>
        <td class="font ">
            <a href="#" id="projectname" name="projectname" class="testone" >${projects.name}</a>
        </td>
        <input type="hidden" id="hello" value="${projects.projid}"/>
    </tr>                     
</c:forEach>

Basically, my code iterates one value from the database to the next. Specific to mention, the INPUT in <input type="hidden" id="hello" value="${projects.projid}"/> changes its value each iteration. However, when i select it through jQuery, i cannot get the 2nd value of PROJID from the database.

Here’s my jquery

$(document).ready(function(){
    $('#projectname').click(function(){
        $(this).each(function(i){
            var choice = $('#hello').val()  
            $('#right').load('show_project_details',{projectid:choice});
        });
    });
});

I know that selecting with an ID is restrained to the first element but doesnt my code have a work around? I’m really trying to avoid radio buttons.

If you have the time please do reply. Thank you very much!

Answer 1

An HTML id attribute should have a unique value within your whole HTML document.

So, change your JSP like this:

<c:forEach var="projects" items="${projectList}">
    <tr>
        <td class="font">
            <a href="#" class="projectname">${projects.name}</a>
        </td>
        <input type="hidden" name="projectid${projects.projid}" value="${projects.projid}" />
    </tr>                     
</c:forEach>

And then, use this JavaScript instead of yours:

$(function() {
    $("a.projectname").click(function() {
        var choice = $(this).parent().next().val();
        $('#right').load('show_project_details', {projectid: choice});
    });
});