1

I'm using the latest spring and trying to bind a very dynamic form with spring. I'll explain with my code, as it is easy to understand I feel:

Test Scenario
Classes involved: three
- Company (Fields: Name, Array List of Employees)
- Employee (Fields: Name, Array List of Addresses)
- Address (Fields: Street, City)

Now, The defaults are initialized as such in the POJOs:

public Address() {
    this.street = "defaultStreet";
    this.city = "defaultCity";
}

Employee class:

public Employee() {
    super();
    this.name = "defaultName";
    addressList = new ArrayList();
    addressList.add(new Address());
}

Company class:

public Company() {
    super();
    this.name = "defaultCompany";
    employeeList = new ArrayList();
    employeeList.add(new Employee());
}

Now, the controller looks like this:

@Controller
@RequestMapping(value = "/form")
public class SiteController {

@ModelAttribute("company")
public Employee populateCompany() {
    return new Company();
}

@RequestMapping(method = RequestMethod.GET)
public String showForm() {
    return "form";
}

@RequestMapping(method = RequestMethod.POST)
    public String produce(@ModelAttribute("company") Company companyInput) {
    return "output";
}
}

Now, the jsp looks like this:

<form:form method="post" commandName="employee">
    <form:input path="companyName" />
    <img src="icon/add.png" class="add-employees"/>
    <div class="employee"></div>
</form:form>  

This is a div to load the default values, and will be deleted upon form submit.  

<div id="defaultValues">
<form:hidden path="addressList[0].street" id="defaultStreet" />
<form:hidden path="addressList[0].city" id="defaultCity" />
</div>  

Now, I'm not going to paste the jQuery here, but explain what it does. When the add icon is clicked... it captures the employee details (name, and as many addresses as the user would like to add)... The user can add as many employees as he wants this way.

Now, When an employee is added, this prints on the screen "Employee has been added successfully" along with "edit" and "remove" icons. All this, goes between and , which is shown as empty above. Such a div is created each time a new employee is added, and all his information goes there.

Now, The way jQuery works, it sends this back to spring

company.employeeList[0]
company.employeeList[1]
company.employeeList[2]

But, if company.employeeList[1] is removed

company.employeeList[0]
company.employeeList[2]

is sent. And this is my problem. How to bind this data properly in the back-end.

I've seen similary questions already on stackoverflow, but since I'm a beginner, I'm not able to grasp them. I request you to please give a detailed solution. Also,

  1. Most of the solutions out there are for older versions of Spring, for example they suggest to use AutoPopulating use, which I learnt was must in this scenario to avoid out of bound exception. But here I do not get such exceptions even with ArrayLists.
  2. I'm not using any xml based configurations. I'm using annotations like @ModelAttribute and no Model model. How to solve the problem in this case?
  3. I want to stay away from ajax. Because, I think there is, and this is a simpler way to do it, if only we can bind the incoming things properly.
  4. I have observed that the removed employees are indeed coming as the default values that I set.
  5. I have also observed that if I store in all the employeeList in employeeList[0], employeeList[0], employeeList[0] in place of employeeList[0], employeeList[1], employeeList[2]... removing or editing is still possible in the front end. However, in the back-end I recieve 3 comma separated values for employeeList[0]. I thought of parsing this in the back end to prepare an ArrayList. Is this a good way to go? I, however, am more inclined to use spring provided features, so that I learn it more.

I'll appreciate any solution, workaround that you can suggest. Please help!


Update 1 This is how the html looks like after adding two rows:

<form id="employee" action="..." method="post">
    <input name="companyName" value="..."/>
    <img src="icon/add.png" class="add-employees"/>

    <div class="employee">
        <p>Employee ... has been added successfully</p>
        <div><input name="company.employeeList[0].name" value="..."></input>...Similar structure for addressList...</div>
        <img src="icon/update.png"/>
        <img src="icon/remove.png"/>
    </div>

    <div class="employee">
        <p>Employee ... has been added successfully</p>
        <div><input name="company.employeeList[1].name" value="..."></input>...Similar structure for addressList...</div>
        <img src="icon/update.png"/>
        <img src="icon/remove.png"/>
    </div>

    <input type="submit">
</form:form>  
Nikhil
  • 163
  • 2
  • 14
  • can you show what your HTML looks like when an or two employees have been added ? – Thomas Apr 04 '14 at 11:24
  • Thomas, please see "Update 1" in the post – Nikhil Apr 04 '14 at 12:18
  • 2
    [Here](http://stackoverflow.com/a/9993144/1225328) is a detailed answer that seems to explain how to solve this issue, am I wrong? – sp00m Apr 04 '14 at 12:42
  • That is close sp00m. That solution is using a flag, and then removing the flagged items in the back-end. Instead, I'm removing unwanted items in the front-end itself. But instead of receiving "null" values, I'm, somehow, receiving the default values. Going by the above answer, I guess, I again have to iterate through all the values, to identify that, and remove those items from the list. – Nikhil Apr 04 '14 at 12:57
  • Even in the given link,the elements are removed dynamically from the front end and based on which a flag is set or unset.Its the same as yours. – crackerplace May 08 '14 at 20:49

0 Answers0