How to call the Struts Action class and display the data on screen using jQuery

Question

I have JSP where I am displaying list of data in a tabular format. One of the columns in each will have 3 different links. Have 3 different methods in Action class, so that the respective method will be triggered on click of the link. Once the method has returned the data from Action class, number of rows will be appended based on the list size returned by Action class. I am using struts iterator to iterate and add the <tr>. I have written the jQuery to perform that operation and everything works fine.

New requirement is that when I click on the first link, it should display the set of records. When I click on the first link again, then the set of records that were displayed should be removed. Its kind of toggling the set of records.

To achieve this, I created a div component, inside which the new set of records would be added and try to do it, but its not working as expected. Have attached the extract of the source code from each file. Please let me know your thoughts.

JSP File:

<s:iterator value="#mbean.myList" var="poItem">
    <tr>
        <td class="matlNumber">&nbsp;</td>
        <td><s:property value="#poItem.doc" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><s:property value="#poItem.weekOne" />  </td>
        <td><s:property value="#poItem.weekFive" /></td>
    </tr>
</s:iterator>

JS File:

$(".poLink").click(function(){      
    var myData = $(this).closest('tr').find('td:first').text();
    document.forms[0].action = "poListMaterialPlanning.action?myData ="+myData ;
    document.forms[0].submit();
}

I tried to use the $.ajax(), but could not assign the data returned by the Action class to the struts variable in JSP.

Answer 1

Premise: the sentence

could not assign the data returned by the Action class to the struts variable in JSP.

is wrong because there is nothing like a "Struts variable" in the rendered HTML page.

That said, there are several ways to achieve your goal (although not completely clear):

1. Load the content when rendering the page, then hide / show it through javascript; this is the fastest way, but there are cases where it is discouraged, for example :

   • the content could have been changed after the page is loaded, because of other users or softwares updating it;
   • it's too big to load it for all the records, and the memory footprint and page loading time becomes unacceptable.

2. Add / remove the content through a standard POST / GET submit; this is the old way, you reload everything, recharge everything and have to manually handle anchors and page-related operations.

3. Add the content through AJAX calls, and remove it through javascript (raw javascript, jQuery, struts2-jQuery-plugin, or other libraries); this is probably what you need, if solution n.1 doesn't fit your case.

To stick with the current standards / best practices / tools that will simplify your work, you should use:

• Struts2-jquery-plugin instead of raw jQuery to perform the AJAX call. Take a look at the showcase, both Ajax and Widgets parts. You probably are looking for the Ajax->Div->Div - Reload example. THEN
• return a JSP snippet in a target div, OR
• a JSON object that you will manually parse through javascript to build the output (less network traffic, but more work), or feed to struts2-jquery tags. BTW, in case of JSON, it's better to use struts2-json-plugin, that will help you a lot.

Side note: if you inject a JSP snippet containing others struts2-jquery tags, you need to read this.