JSP/Struts2: how to access object bean in selected table row

Question

In my Struts2 application, I have a table that is dynamically populated with data, coming from the database (via Eclipselink JPA). Below that table there's a button that became enabled as soon as a row is selected in the table (jQuery). Now, when that button is clicked, I need to know which row is currently selected, so I can access the corresponding object bean, since I need to pass the bean ID ( target_id ) into the next page ( createexperiment2 action). So, in short, the question is: How can I access the Struts2 object bean that is contained in the selected (clicked) table row?

1. Screenshots:

Before row selection -> After row selection

2. JSP code:

<table id="targets" class="ink-table grey tableSection">
    <thead>
        <tr>
            <th colspan="5" class="align-left">Select your target:</th>
        </tr>
    </thead>
    <tbody>
        <s:if test="targets.size > 0">
            <s:iterator value="targets">
                <tr id="row_<s:property value="i"/>">
                    <td class="all-100"><a href="<s:url action="showtarget"><s:param name="id"><s:property value="target_id"/></s:param></s:url>"><s:property value="name"/></a></td>
                    <td class="all-15"><a href="<s:url action="edittarget"><s:param name="id"><s:property value="target_id"/></s:param></s:url>">edit</a></td>
                    <td class="all-5">|</td>
                    <td class="all-15"><a href="<s:url action="deletetarget"><s:param name="id"><s:property value="target_id"/></s:param></s:url>">delete</a></td>
                    <td class="all-5"><a href="help.jsp">?</a></td>
                </tr>
            </s:iterator>
        </s:if>
    </tbody>
</table>

[...]

<a href="createexperiment2" class="ink-button double-vertical-space all-25 buttonSection" id="next" disabled>Next &gt;</a>

3. jQuery code:

$(document).ready(function(){
    $('.tableSection tbody tr').click(function()
    {
        var selected = $(this).hasClass("highlight");

        $('.tableSection tbody tr').removeClass("highlight");
        $('.buttonSection').attr("disabled", false);

        if(!selected)
          $(this).addClass("highlight");
    });
});

EDIT 1:

With the help of Andrea, I've finally been able to access Struts2 functions with jQuery, the poblem is that I can only access the properties of the last bean on the table (the last one that was accessed when the JSP was rendered, which makes sense). See the updated code below, while I'll try a workaround for this:

JSP:

<s:if test="targets.size > 0">
    <s:iterator value="targets">
        <tr onclick="<s:set var="tid" value="target_id"/>">

[...]

        </tr>
    </s:iterator>
</s:if>

[...]

<script type="text/javascript">
    $(function () {
        $('.tableSection tbody tr').click(function(event) {
            alert ('<s:property value="%{#tid}" />');
        });
    });
</script>

EDIT 2:

Now I know which table row index has been clicked, but after hours of trying to assign it to a variable (using Struts tags) and send it to the action, I'm still not getting what I want. I'm not even being able to send this row index to the Action. This is frustrating. Nevertheless, that's how I got to know which row has been selected:

<tr onclick="getRow(this)">

[...]

<script>
function getRow(x) 
{
    alert("Selected row: "+x.rowIndex);

    //return x.rowIndex;
}
</script>

EDIT 3:

This time, I was finally able to send the row ID (a String), to the action. The only remaining issue is that the action gets call twice, the first one on the click event, and the other one because of the href attribute of the a HTML element, which redirects to the desired Struts2 action. Apart of being obviously inneficient, this naturally makes the variable become null on the second call to the action. Do you know how can I somehwow "merge" this 2 calls to the createxperiment2 action into only one? I've tried with the async option in the AJAX call set to false, with no success.

[first, removed the onclick event from the table tr , since I only need to know which row is highlighted when the "Next" button is pressed]. The code currently goes like this:

<script type="text/javascript">
        $('#next').click(function(event)
        {
            var row = $('.highlight').index();

            alert (row);

            $.ajax({
                method: "POST",
                url: "createexperiment2.action",
                data: { row : row }
                });
        });
</script>

Answer 1

Q: I have assigned an ID to each table row. How can I know which one is the selected one?

Obtain the object's id with the this keyword:

$('.tableSection tbody tr').click(function(event) {
    alert (this.id);
    ...

Q: how can I use the selected table row ID to access the corresponding bean object (represented in the row itself)?

This is not clear: just submit your id and retrieve the object serverside, no matter if through AJAX or a standard form submit.

Answer 2

Finally, the solution:

First get the ID of the object (I made it with Struts). Then, with the help of an AJAX call, send the ID to the desired action ( url: attribute). Upon success of this action, define with the success: callback option where you want to redirect it.

Struts / JSP:

<s:if test="targets.size > 0">
    <s:iterator value="targets">
        <tr id="<s:property value="target_id"/>" class="highlight">

[...]

        </tr>
    </s:iterator>
</s:if>

jQuery:

<script type="text/javascript">
    $('#next').click(function(event)
    {
        var tid = $('.highlight').attr("id");

        $.ajax({
            method: "POST",
            url: "createexperiment2.action",
            data: { tid : tid },
            success:
                function()
                {
                    //alert("TID -> "+tid);
                    window.location = "loadworkloads.action";
                }
        });
    });
</script>