Pages Navigation Menu

Coding is much easier than you think

Dynamically add, remove list of objects from jsp Using Struts2

Dynamically add, remove list of objects from jsp Using Struts2

 
In this article we shall learn on how to dynamically add, remove list of objects from jsp Using Struts2.
 
File : User.java (Model Class)
 

package com.simplecode.action;

import java.util.Collection;

public class User 
{
	int regNo;
	String name;
	Collection<Address> addresses;

	public Collection<Address> getAddresses() 
	{
		return addresses;
	}

	public void setAddresses(Collection<Address> addresses) 
	{
		this.addresses = addresses;
	}

	public int getRegNo() 
	{
		return regNo;
	}

	public void setRegNo(int regNo) 
	{
		this.regNo = regNo;
	}

	public String getName() 
	{
		return name;
	}

	public void setName(String name) 
	{
		this.name = name;
	}
}

 
File : Bean Class
 

package com.simplecode.action;

public class Address 
{
	private int houseNo;
	private String street;
	private String city;
	private String country;

	public int getHouseNo() 
	{
		return houseNo;
	}

	public String getStreet() 
	{
		return street;
	}

	public void setHouseNo(int houseNo) 
	{
		this.houseNo = houseNo;
	}

	public void setStreet(String street) 
	{
		this.street = street;
	}

	public String getCountry() 
	{
		return country;
	}

	public void setCountry(String country) 
	{
		this.country = country;
	}

	public String getCity() 
	{
		return city;
	}

	public void setCity(String city) 
	{
		this.city = city;
	}
}

 
In order to implement the above functionality via ajax, do read the article on CRUD Operations in Struts 2 using jTable jQuery plugin via Ajax
 
Do read :

 File : UserAction (Action Class)
 

package com.simplecode.action;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ModelDriven;

public class UserAction implements Action, ModelDriven<User> 
{
	User user = new User();
	
	public User getUser() 
	{
		return user;
	}
	
	public void setUser(User user) 
	{
		this.user = user;
	}
	
	public String execute() 
	{
		return SUCCESS;
	}
	
	public User getModel() 
	{
		return user;
	}
}

 
In the above article I have used the concept of ModelDriven interface in struts2, if you are not aware of what model driven interface is, then please read the article on modeldriven interface here
 

Jsp Pages

 
File : index.jsp

<HTML>
<HEAD>
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
	function addRow(tableID) 
	{
		var table = document.getElementById(tableID);

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var counts = rowCount - 1;

		var cell1 = row.insertCell(0);
		var houseNo = document.createElement("input");
		houseNo.type = "text";
		houseNo.name = "addresses[" + counts + "].houseNo";
		cell1.appendChild(houseNo);

		var cell2 = row.insertCell(1);
		var street = document.createElement("input");
		street.type = "text";
		street.name = "addresses[" + counts + "].street";
		cell2.appendChild(street);

		var cell3 = row.insertCell(2);
		var city = document.createElement("input");
		city.type = "text";
		city.name = "addresses[" + counts + "].city";
		cell3.appendChild(city);

		var cell4 = row.insertCell(3);
		var country = document.createElement("input");
		country.type = "text";
		country.name = "addresses[" + counts + "].country";
		cell4.appendChild(country);

	}
</SCRIPT>
</HEAD>
<BODY>

<form action="submit" method="post">
<table>
<tr>
<td>
Reg No  
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</td>
<td><INPUT type="text" name="regNo" /></td>
</tr>
<tr>
<td>Name</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</td>
<td><INPUT type="text" name="name" /></td>
</tr>
<tr><td><br/><b>Addresses</b></td>
</tr>

</table> 
 

<TABLE id="addressesTable">
	<TR>
		<TD>House No</TD>
		<TD>Street</TD>
		<TD>City</TD>
		<TD>Country</TD>
	</TR>
	<TR>
		<TD><INPUT type="text" name="addresses[0].houseNo" /></TD>
		<TD><INPUT type="text" name="addresses[0].street" /></TD>
		<TD><INPUT type="text" name="addresses[0].city" /></TD>
		<TD><INPUT type="text" name="addresses[0].country" /></TD>
	</TR>
</TABLE>
<INPUT type="button" value="Add More" onclick="addRow('addressesTable')" /> 
<input type="submit" value="SUBMIT" />
</form>
</BODY>
</HTML>

 
File : result.jsp

<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>User Details</title>
</head>
<body>
	<h1>User information</h1>
	ID : <s:property value="regNo" /><br /> 
	Name : <s:property value="name" /><br /> 
	Addresses :
	
<table>
<tr>
    <td width="10%">Reg No :</td>
    <td width="15%" >Street :</td>
    <td width="15%" >City :</td>
    <td width="15%">Country :</td>
</tr>

<s:iterator value="addresses">
<tr>
    <td width="10%"><s:property value="houseNo" /></td>
    <td width="15%" ><s:property value="street"/></td>
    <td width="15%" ><s:property value="city"/></td>
    <td width="15%"><s:property value="country"/></td>
</tr>
</s:iterator>
</table>
	
</body>
</html>

 
Recommended reading :

 

Struts.xml

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <package name="default" extends="struts-default">
        <action name="submit" class="com.simplecode.action.UserAction">
            <result name="success">result.jsp</result>
        </action>
    </package>
</struts>

 

Run it

 
On running the application
 
Collection values
 
Input
 
Input collection
 
Output
 
Collection output
 
** UPDATE: Struts 2 Complete tutorial now available here.
 

About Mohaideen Jamil


Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.