title: JSP/Struts2: how to access object bean in selected table row
body: <p>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 (<code>target_id</code>) into the next page (<code>createexperiment2</code> action). So, in short, the question is: <strong>How can I access the Struts2 object bean that is contained in the selected (clicked) table row?</strong></p>
  
  <p><strong>1. Screenshots:</strong></p>
  
  <p><a href="https://db.tt/YVdG8Rgj" rel="nofollow">Before row selection</a> -> <a href="https://db.tt/PFWNUbVy" rel="nofollow">After row selection</a></p>
  
  <p><strong>2. JSP code:</strong></p>
  
  <pre><code>&lt;table id="targets" class="ink-table grey tableSection"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="5" class="align-left"&gt;Select your target:&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;s:if test="targets.size &gt; 0"&gt;
              &lt;s:iterator value="targets"&gt;
                  &lt;tr id="row_&lt;s:property value="i"/&gt;"&gt;
                      &lt;td class="all-100"&gt;&lt;a href="&lt;s:url action="showtarget"&gt;&lt;s:param name="id"&gt;&lt;s:property value="target_id"/&gt;&lt;/s:param&gt;&lt;/s:url&gt;"&gt;&lt;s:property value="name"/&gt;&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="all-15"&gt;&lt;a href="&lt;s:url action="edittarget"&gt;&lt;s:param name="id"&gt;&lt;s:property value="target_id"/&gt;&lt;/s:param&gt;&lt;/s:url&gt;"&gt;edit&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="all-5"&gt;|&lt;/td&gt;
                      &lt;td class="all-15"&gt;&lt;a href="&lt;s:url action="deletetarget"&gt;&lt;s:param name="id"&gt;&lt;s:property value="target_id"/&gt;&lt;/s:param&gt;&lt;/s:url&gt;"&gt;delete&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="all-5"&gt;&lt;a href="help.jsp"&gt;?&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/s:iterator&gt;
          &lt;/s:if&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>[...]</p>
  
  <pre><code>&lt;a href="createexperiment2" class="ink-button double-vertical-space all-25 buttonSection" id="next" disabled&gt;Next &amp;gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>3. jQuery code:</strong></p>
  
  <pre><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");
      });
  });
  </code></pre>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>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:</p>
  
  <p><strong>JSP:</strong></p>
  
  <pre><code>&lt;s:if test="targets.size &gt; 0"&gt;
      &lt;s:iterator value="targets"&gt;
          &lt;tr onclick="&lt;s:set var="tid" value="target_id"/&gt;"&gt;
  </code></pre>
  
  <p>[...]</p>
  
  <pre><code>        &lt;/tr&gt;
      &lt;/s:iterator&gt;
  &lt;/s:if&gt;
  </code></pre>
  
  <p>[...]</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $('.tableSection tbody tr').click(function(event) {
              alert ('&lt;s:property value="%{#tid}" /&gt;');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>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:</p>
  
  <pre><code>&lt;tr onclick="getRow(this)"&gt;
  </code></pre>
  
  <p>[...]</p>
  
  <pre><code>&lt;script&gt;
  function getRow(x) 
  {
      alert("Selected row: "+x.rowIndex);
  
      //return x.rowIndex;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 3:</strong></p>
  
  <p>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 <code>href</code> attribute of the <code>a</code> 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 <code>createxperiment2</code> action into only one? I've tried with the <code>async</code> option in the AJAX call set to false, with no success.</p>
  
  <p>[first, removed the <code>onclick</code> event from the table <code>tr</code>, since I only need to know which row is highlighted when the "Next" button is pressed]. The code currently goes like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $('#next').click(function(event)
          {
              var row = $('.highlight').index();
  
              alert (row);
  
              $.ajax({
                  method: "POST",
                  url: "createexperiment2.action",
                  data: { row : row }
                  });
          });
  &lt;/script&gt;
  </code></pre>