Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)

A much better approach to this problem is simply to use JSON. A number of comments below are in regard to nested lists. The solution detailed here does not readily facilitate nested lists. The solution outlined in this blog does: http://outbottle.com/spring-4-web-mvc-json-handling/. JSON is the recommended way of achieving “Adding Objects to a List element on the fly”

The project downloadable below is an answer to a question repeated in this blog (Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method))

“How can I submit nested lists of objects?”

The answer is AJAX and JSON.

A very good approach to this is with AngularJS and Spring as demonstrated here.

End Edit

ok, hard to describe this one and hard to find stuff on google so here’s an image explaining.

Add and Remove Items from List Dynamically in Spring 3 Web MVC

Java

1

2

3

publicclassPersonListContainer{

privateList personList;

When clicked, the ‘Add’ and ‘Remove’ links in the image generate JavaScript events which add and remove the HTML elements dynamically client-side. The idea is to allow a Java List Object to have elements added and removed dynamically on form submission.

A Generic JavaScript library is provided. It makes the process of dynamically adding List elements (rows or Person objects in this example) effortless for any situation. The JavaScript library provides callabacks thus facilitating an AJAX implementation with little effort.

The Netbeans project and the JavaScript file are available for download at the bottom of the page.

Intro

When I started this I expected to need to use LazyList / AutoPopulatingList objects from Apache but I was pleasantly surprised to find that this wasn’t necessary at all. I’d be open to comments on this one, if anyone can let me know if Spring have included such functionality in the latest version of spring or am I just demonstrating a different problem here? Anyway….

Getting Started

The setup for this is effortless. It’s effectively the same as the setup for the Hello Spring Tutorial so I’ll skip on past those details and onto this specific example.

This Person List Example

This example uses a Person object.

Then there is an object which contains a List<Person> of Person objects.

There is a form which submits existing, new and removed Person objects to a controller.

Finally, there is a simple JavaScript library which facilitates the adding and removing of Person Objects in the form.

Person.java

Person.java

Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

publicclassPerson{

privateStringname;

privateStringage;

publicPerson(){

}

publicPerson(Stringname,Stringage){

this.name=name;

this.age=age;

}

.......setters andgetters.......

PersonListContainer.java

Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

packagecom.outbottle.indexedpropeg.model;

importjava.util.LinkedList;

importjava.util.List;

publicclassPersonListContainer{

//Important. Set this to a default List in order to avoid null pointer exceptions when the list is empty

The important point is that the JavaScript library provided takes care of all the indexing before the form is submitted (and also on each add and remove event encase you want to submit the form using AJAX on each event).

However in a situation where there are 0 rows, a default row must be provided as demonstrated in the code above. This is because the JavaScript must have at least one row to clone. In the absence of at least one row it simply cannot add a new row. This presents an issue of it’s own; it may be undesirable to have a default row. If this is the case, simply add the class ‘defaultRow‘ to the default row as demonstrated in the code above. This will result in the row being removed yet still clonable; I.e. a new row can be added.

The controller is straight forward, it’s included at the bottom of the page.

So, the form is fairly self explanatory in terms of iterating through a list and rendering the existing Person object properties as editable fields. One thing that may not be obvious is:

How are rows added and removed?: Ans: The JavaScript library takes care of that as demonstrated below.

The JavaScript library requires a few variables in order to work correctly. Here is a simple explanation: Click the image to enlarge.

How can store the value for HTML select and checkbox using the above logic ?

NameNotTaken

Hi Json

Hmmm, I don’t really understand the question. If you can be more specific I’ll try to help.

Thanks

Json

i am try to use a dynamic list but instead of textbox used above i need to use box , issue is we cannot assign value to select box element in HTML markup. Can you help

NameNotTaken

Thanks Json

1. Replace the unwanted text boxes

with your fields as so

That’s it, that’s actually all that’s needed.
However, you may now find that when you add a new row, you may wish to reset the value
You can do this in the “Row Added” call back JavaScript function.
In index.jsp see the JS function rowAdded(rowElement){}
You’ll see a comment there: “//may want to reset options etc”
As jQuery is used, you can reset the values as you see fit but here’s a simple example of how:
$(rowElement).find(‘select’).val(”);

Checkbox’s can be handled in the exact same way. Let me know if further questions

Jsom

Thanks work fine now .. just need to work on remove scenario.. As rows are not getting deleted from List when i remove them but .. they are deleted from table but when i refresh page they reappear

NameNotTaken

Great,

After you click the link to remove the item it’s necessary to click the save button to actually submit the form. That may be it?
If you wish to submit the form when the remove link is clicked you can do so in the JS hook function in index.jsp

“function rowRemoved(rowElement){}”

Rupesh

Hi,

Remove is not working in my case when multiple rows are coming from controller. i am using spring here. what is happening for first row only it is removing but for all other its not. i have follow the steps as it is except the js file.
i copied all the code from js file into my jsp itself.

In any case, you’ve got an element with id=”removeRow” in a repeater so it’ll appear multiple times on the page. It appears again outside the repeater. This is invalid HTML. jQuery won’t handle multiple identical DOM Id’s and hence it’s applying the handler to the first one always hence the reason why you’re first row is always being deleted.

To solve your problem…. change it back to class=”removeRow” inside the repeater and configure the JS with ‘removeRowClass’ not ‘removeRowId’ (which isn’t a parameter in the original code).

Thanks for the comment, I’m happy to help.

John

rupesh

Thanks John for your answer.
i have changed it to “removeRowClass” and it is working.
i have one more issue. it is clonning the last row with all the populated values in fields but i wanted my new rows to be reset.

while clonning the last row we are not getting the unique id for newly added row. My requirement is to access the distinct fields from each row and do some calculation. I also have to do the validation for each field.

please suggest.

Regards
Rupesh

NameNotTaken

This is no problem. If you look at the jsp file above, line 70 is an example of a hook function that is called when a new row is added. ‘function rowAdded(rowElement)’ you now have the rowElement so you can do what you want with it.

e.g.

$(rowElement).attr(‘id’,’uniqueId’);

etc.

Let me know if this solves your problem.

rupesh sengar

Thank you so much for your quick response!!!

will try it and let you know.

but this method will called when row is added. what if i want to validate the each rows fields onclick of say submit button. i wanted to loop through it and do the validation.

waitting for your reply.

Thanks

rupesh sengar

Also i am getting a javascript error in prepFormForSubmit() in js file. $(className).each function is called for all the fields after that it is throwing an error in below line

Sorry to bother you with so many question but i am really stuck on this.

Please reply.

Thanks

NameNotTaken

I’ve emailed you. We can take a quick look at the code, I’m sure it’s something fairly simple.

rupesh sengar

Hi John,

have landed in different problem. i have 2 div element which is having the same functionality to add/remove element. in this case i have just one master form.so how can i initialize the data for these 2 div within same $(document).ready( function() {}

where i have to pass formId, rowClass, addRowId..etc

Thanks

NameNotTaken

Some basic jQuery can help you here.

Add a class to each input field (or select) in the list e.g. “ipField”.
Then, something like this can be used to do client side validation.

var valid = true;
$(this).removeClass(‘error’);

$(‘.ipField’).each(function(){

if($(this).val() == “”) {

$(this).addClass(‘error’);
valid = false;
}

});

The css:

.ipField.error {
border:1px solid red;
}

If valid is false, don’t submit the form.

The ‘beforeSubmit’ function specified in the initialisation can be used for this. Return false to prevent the form from being submitted. Return true to allow the form submission proceed.

Be sure to validate on the server-side too though. It’s not safe to depend on client-side validation only. If server-side validation fails, just throw an exception because something is very wrong. Personally I wouldn’t bother trying to send information about the validation issues back to the client.

jsGuy

hi,
I replaced personlist with dynamic table
While running this i am getting following error : ERROR org.springframework.web.servlet.tags.form.InputTag – Invalid property ‘dynamicTable[0].name’ of bean class [RequestForm]: Bean property ‘dynamicTable[0].name’ is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter?Please help.
ERROR org.springframework.web.servlet.tags.form.InputTag – Invalid property ‘dynamicTable[0].name’ of bean class [RequestForm]: Bean property ‘dynamicTable[0].name’ is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter?
Please help.

NameNotTaken

Hi jsGuy

Can you post the relevant code here please. I’ll take a look. (Just the Bean form, the container and the html/jsp part of it).

You’ve got “mainBilling” and “areaCode” member variables.
Yet, in the JSP you name them as:
dynamicTable[${i.index}].name

and
dynamicTable[${i.index}].age

Make them:
dynamicTable[${i.index}].mainBilling

and
dynamicTable[${i.index}].areaCode

Let me know if that solves the problem.

Thanks

jsGuy

NameNotTaken: Thanks a lot. Its working fine now. Going forward now.

NameNotTaken

Great, glad to hear it.

jsGuy

@NameNotTaken:disqus : Thanks, Its working fine now with Add and Remove links

sdobbers

Thanks a ton for this! It worked like a charm. The only thing I ran into was one minor problem. I was able to add/remove items and it ended up binding fine, but when I accidentally removed all of the items…I wasn’t able to go back and add an item at all. I assume this has to do with the javascript not having a place to add the items into?

Any help would be greatly appreciated 🙂

NameNotTaken

Hi Sdobbers

I’m afraid the problem was larger than that. Two main problems.

Minor one first:
In the PersonListContainer, I’ve given the member variable ‘personList’ a default value. This prevents a null pointer exception when submitting the form with 0 row elements. I.e. All rows removed. This is quite necessary actually.

The second problem is the one you found. I.e. removing all rows results in the JavaScript not having any existing row to clone therefore clicking the add link results in nothing happening. The same problem would occur if the List<Person> had 0 elements to begin with.

To overcome this the following is now necessary:

A default row must be provided. See line 39 of the JSP above. This is of course to allow the JS to have at least one row to clone.

A new problem arises from having to provide a default row. I.e. the default row may not be required at all, and if validation is applied, it may be confusing for a user, (i.e. having to manually remove an Person that didn’t really exist in the first place)

Anyway, to overcome this, a CSS class ‘defaultRow’ can be applied to the row as demonstrated in the JSP above. This results in the default row being automatically removed for the form but now the add button works.
The absence of the CSS class ‘defaultRow’ results simply in the row being displayed as normal.

Weird right; adding a default row just to have it removed? Not so, as mentioned previously, one row must exist in order to allow the JS to clone it hence, making the ‘add’ link work.

The ‘dynamic_list_helper.js’ file/library and the Netbeans project itself have been updated. The blog itself has also been updated with explanations where necessary.

I’m delighted you pointed this issue out, it was a potentially big one. Thanks very much.

sdobbers

Thanks a ton, I will have to try and add these updates as soon as I get a chance!

I guess I sort of knew about the first problem…but thought I had just implemented it wrong, so I worked around it a different way (not quite so elegant…I’m not a UI developer at all). I want a user to be able to add as many “tags” as they wanted, so I ended up initializing it with a blank tag “”, then later on after they submitted I was removing any empty tags myself in Java. Clumsy, but I guess it worked? I’ll definitely switch it up to do what you mentioned instead, seems a lot cleaner!

Is there an easy way to do validation in JavaScript? For example, just making sure someone doesn’t enter in a blank value (except for on the default since its not technically required)?

NameNotTaken

Good to hear it!

Your beforeSubmit() function would look something like this. Return false to prevent the form submitting, return true to proceed with the submit.

A Set<AtlasService> won’t work unfortunately. It needs to be a List<AtlasService>

I’m going to look further into this actually because it’s not ideal.

roob

Thanks NameNotTaken, yes I got it working with a list.

sherlok

Thanks John, this is really useful!

However, I find that the removal doesn’t work on the serverside – I’m using hibernate with spring and hades, so i expect it is to do with that (e.g., when binding on the serverside it gets the entity from the DB then updates it with the new bind values coming in from the form submit and because the row removal is not an edit or addition it merges the changes and doesn’t do the delete).

But for the benefit of other readers, here’s a solution that does not require any modification to the ‘dynamic_list_helper.js’ file.

We’re going to make a list of deleted Person objects available to us on the server side. I.e. a list of deleted Person’s will be submitted with the form in order to eliminate having to figure that out on the server side.

Obviously, a list of names may not be practical If using integer ID’s however, a comma separated list is ok i guess, if not, some XML text in ‘deletedNames’ form field the would be better. Whatever works!

How I can pass the Date values to Controller? In Bean these properties are declared as Date. Any help is appreciated asap.

NameNotTaken

Hi Murthy

Yea, I struggled a bit with this one but I’ll just give the simplest answer I can while clarifying for others; some stuff you probably already know.

I can offer a couple of suggestions.

1.
Put the $(“.datepicker”).datepicker(…) stuff into the $(document).ready(…) function.

In fact, have a function for setting the datePickers as you’ll need it in a moment.

$(document).ready( function() {

addDatePickers();

//…. other stuff here

});

function addDatePickers() {

$(‘.datepicker’).datepicker({

showOn : “button”,

buttonImage : “../../images/calendar.gif”,

buttonImageOnly : true

});

}

3.
Here’s the bit that got me.
You’ll have to add a new line to dynamic_list_helper.js
Insert: beforeRowAdded();
at line 137. Let it be the first thing in the addRow() function
Now, in index.jsp (or wherever) you need to add that function.

function beforeRowAdded() {

//remove all the datepickers temporarily
$(‘.datepicker’).datepicker(‘destroy’);

}

function rowAdded(rowElement) {

//clear the imput fields for the row
$(rowElement).find(“input”).val(”);

2.1. for @DateTimeFormat remember to have the jodaTime library in the classpath

ashwin

Hi John,

I am using ur functionality in my code. I am facing problem when I click on add new Object(Person). I can’t add the new object. By default there will be two rows. and I am adding new row. here is my code please help me…

note The full stack trace of the root cause is available in the JBoss Web/3.0.0-CR1 logs.

JBoss Web/3.0.0-CR1

can I implement your code in my architecture and if possible please give me the answer

NameNotTaken

Hi pramil

Yes, you may use the code and do whatever you want with it.

As for the answer; I don’t see any obvious issues with your code. If you can recreate the problem in a separate project and make it available for download somewhere (drop box or something) I’d be happy to take a look. I’m sure it’s something small.

John

oski

I’m trying to use this code with Spring Web Flow so I don’t have @Controller. I only have this flow.xml which is used like controller. How can I use this DefaultController in SWF?

NameNotTaken

I’m not familiar with SWF to be honest. The JavaScript doesn’t require or depend on the @Controller, it just organises the form parameter names (along with adding and removing of course) so it should work with your particular setup too.

oski

I have no idea why it doesn’t work for me. Nothing happens when I click Add
or Remove link. This is my code:

But it’s not working. Name is being added properly but ageText is added to last one separated by coma ‘,’.

NameNotTaken

Hmmm, i don’t have the exact solution but after some experimentation I can tell you that the source of the problem for you is at line 118 of the js file. The .match() is not true due to the presence of the extra []’s in the parameter name. If you make the match() be true in this case it will solve your problem.

indexedPropertyMemberNames : ‘name,ages[0].ageText’ is probably not the correct approach. Just proceed as normal as so…..

…and try to get that line of JS (line 118) matching correctly. That should fix it (I think but, wouldn’t bet on it either, sorry).

bracki

Ok, I prepared extra class to do everything for me. But still got another problem. What to do if field age is not String but Boolean and I want to have form:checkbox instead of form:input in my .jspx file?

NameNotTaken

Set the default value of the boolean in the Java class to ‘false’

The checkbox name/value will not be submitted with the form when it’s not checked. Therefore, the default ‘false’ in the java class will be used. When the checkbox is checked, it’s name/value will be submitted. Spring will convert it to a boolean ‘true’.

(You may need to set the value attribute of the checkbox to “true”. Spring will convert the string value ‘true’ to boolean true. In the absence of this value from the submitted form, the default java class ‘false’ will be used. Using JSTL tags, value=”true” is the default for a <form:checkbox path=”someBooleanMember” />)

pravalya

Can u please help me with this problem:
The problem is that, in springs pagination,the result is not displayed automatically when i clisk on next button, but i have to click the submit button before the new results are shown.
And as i see it, it must be because the form is not submitted, when i click on the link.
How can i solve this in a Spring way, so that i dont have to click on the submit button again before the search results are displayed ?
And yes i am new to Spring
Best Regards
pravalya

NameNotTaken

Hi Pravalya

It sounds like your problem isn’t really a spring problem but a normal HTML problem that can easily be solved with some JavaScript.

To submit a form using jQuery you do it as so:

$(‘#form_DOM_id’).submit();

To make this happen when you click a link:

$(‘#link_DOM_id’).click(function(){
$(‘#form_DOM_id’).submit();
return false; //to stop the link directing to the href of the link
});

A small amount of jQuery can really help you allot.

asdf

Thanks for this library, it really helped me!

I ran into a problem as my indexed property member names have dots (.) in them, which I got around by modifying the prepFormForSubmit function.

If the form has more than one list, and the same field name is used in them, then the script gets confused. I have otherwise encapsulated everything, with multiple instances of DynamicListHelper, and different names for rowClass, rowContainerId.
How can this be fixed without renaming the fields?

NameNotTaken

Hmmmm, yea, I’ve examined the script. Your approach is correct but, you’ve exposed a flaw in the script. You would have to refactor it to find elements relative to the rowContainerId rather than the formId. I.e. look for instances of “$(config.formId).” in the script, changing this to “$(config.rowContainerId).” may help overcome the flaw.

I might look into this later and provide a fix but finding the time could be difficult.

Bernard

Thanks for the idea. I tried this but that did not fix the issue in my case. When using input type=checkbox then we need to modify in function rowAdded(rowElement):

$(rowElement).find(“input[type=text]”).val(”);

If [type=text] is missing then the statement pushes values into check boxes which breaks them.

But when i click Add button for employment, it creates a copy of education as education row was the last row. How can we use this to add two different rows in the same form with different add/remove button.
Please advice..
cheers
aks

Guest

Hi,
I’m trying to add jQueryUI AutoComplete on dynamically created input forms, but it doesn’t work. Autocomplete works just on first input. What can be a problem?

NameNotTaken

Off the top of my head I’d say you need to add the autocomplete handler to the new field that has been dynamically added. I.e. if a new input field is created it will not have the autocomplete handler applied. You will have to do it manually.

An issue has been correctly highlighted in the discussion below. From the description of your problem that issue is unrelated. I’d simply try adding the handler manually to the new field, that should do it. Feel perfectly free to post here again if the issue isn’t going away….

Thanks
John

NameNotTaken

In fact, if you look at the image above, point 8, the JavaScript function called ‘rowAdded(rowElement)’, you can easily find the new field just added (using .find(..)) and apply the autoComplete() to the field there.

chaitanya

I want xml configuration for this example without using annotations please help me. how to configure? Thank you.

NameNotTaken

I’m not sure how to identify and configure the controller using XML only. But, I think whatever way the controller is configured will have no bearing on the end result. I’d use annotations is you can, otherwise, some older articles on other sites should have examples of XML configuration. Once you have the Controller setup, this JS code should work just the same. It’ll work irrespective of which way the controller is identified and configured.

sri

Hey, I am looked at your example. I did exactly placed in example everything working fine. But I have one issue I was not able to reset the select values. select dropdown copying values and it is not allowing me to change. can you please give some suggestions on how to reset the select dropdown

This what I used in rowAdded method to reset the select box.

$(rowElement).find(“select”).prop(“selectedIndex”, 0);

Thank you,
Sri

HAL

I modified two lines in the helper code so that it would work with multiple lists. So far it looks like it’s working. Let me know if I’m missing something

I work for a commercial company and with to use the code for development. What are the license requirements for this tool?

NameNotTaken

Hi Jason

Use as you wish in whatever way you wish for whatever you wish, redistribute as you wish…. there is no license. There is also no warranty or guarantee though……… (-_^).

Alex

That is what I need, thanks a lot!

yissamo

Hi, Thanks for this article. At first, I tried to use autopopulating list (spring) but it turned out useless as you said.

Now, I’m trying to add a nested for:each in the jsp. I mean in Person class I want to add a List of Person attribute or a list of whatever. If I add a nested for each in jsp page and I clone all the person row the nested list is not filled in submit. Do you have an idea about doing this ?

NameNotTaken

Hi Yissamo

You would have to adjust the JS to become recursive. This isn’t trivial.

If I were doing what you’re doing, I probably wouldn’t use this JS library. I’d write custom JS code. The code wouldn’t be concerned with the specifics of the <form> it would just dynamically add/remove simple fields where needed. Rather than submitting the form, the JS would populate a JSON object and send it to the server via AJAX. This is relatively simple with jQuery and Spring. Far simpler than attempting to adjust this library to fit your needs.

Let me know if you need pointers…..

John

p_prnm

Hi,

Need help with adding list of objects in another list.
How to add a property of list type in the indexedPropertyMemberNames?

How to configure this.. i.e, how to add the config for list type property.

Thanks in advance.

NameNotTaken

Hi

This problem arrises in several of the comments below.

I would recommend that you do not spend another minute trying to do this with a HTML form submit.

The blog uses AngularJS but in fact, plain old JavaScript could just as easily be used. Populating a complex object with JavaScript is effortless. With Spring setup and configured as per the blog, the complexity and messy’ness is completely removed.

Use, JSON. Give up on trying to use a HTML form for this.

Questions welcome….

p_prnm

thank you for the reply.
My application is on Spring 3, and I’m using the form bean in my jsp.
If it is complex is there any other to bind my list of objects into another list in which objects will be added through the dynamicListHelper.js

Can you please provide solution on this.

NameNotTaken

I don’t think dynamicListHelper.js can help you with this without significant modification. In any case, your form is complex enough to result in a bug-farm due to complexity even if you do manage to get it working.

The JSON technique will work with Spring 3 also; the JSON handling code and the Jackson dependency are the same (although you may need an older version of Jackson, I’m really not sure). In any case, you just need to add Jackson to your classpath and it will work automatically.

If I were in your situation now I would do the following:

1.Bind using JSP as you are now.

2.Use jQuery to allow a user to dynamically add elements (form fields and markup) to the page where needed.

3.Add a JavaScript event handler to the form submit. Prevent the submit using JavaScript. Instead, iterate over all the form elements building up a JSON object.

4.Send the JSON object to the server via AJAX.

5.If validation fails, this is ok, you still have all the data on the page, just use JavaScript to highlight the errors based on an intelligent response from your Spring Controller method.

6.If validation succeeds, use JavaScript to redirect to the new page (keeping in mind that this is not an unnecessary redirect, Spring would also issue a redirect after a successful transaction)

7.Side Note: After getting this working, I would consider loading a virtually empty JSP page, then making an AJAX request to load the model. Use AngularJS or similar to bind the data on the page. Then use AngularJS to edit the JSON model on the page before sending the same JSON object (now modified) back to the server for persistence. This is an established design pattern with solves the problem you are currently having, it also makes for code that is transferrable cross-platform (An app and a website can potentially use the same code). It also provides a more user-friendly experience.

If JavaScript and JSON are not within your skillset comfort zone, not to worry, what I’m proposing is really not too difficult. You would have this technique learned and implemented faster than you will implement the HTML form technique. In any case, it’s well worth the effort as you will undoubtedly need to do this again. Feel free to post questions here as it may help others in the same situation. I’ve written several blogs on AngularJS. This one is a good starting point: http://outbottle.com/angularjs-a-crash-course-in-processing-ajax-json/

The example works as so:
-Page loads.
-Ajax Fetch is made, model received is rendered on the page.
-Model is updated by user / AngularJS.
-Model is sent to server for persistence.
-Model is returned from server in the response.
-AngularJS rebinds the model.

Let me know if that clarifies things.

capivarao .

Man, you rock!

Matteo Vattelapesca

I can not send to the controller that all rows are deleted.He always exists one.
Any solution?

Ola

That was very useful tutorial, just what I needed 🙂

Shwetank Arya

Hi,

Thank you. This post is helpful.

However, my problem is a little different. My collection, a list is holding ‘a collection of related same type of objects’ which comprise of columns of my row.

This is different from indexedPropertyMemberNames : ‘name,age’
as
values will be like-

[0].fieldName,[1].fieldName … & so on.

I just tried to implement this on suggestion from a friend but I am wondering if this solution make things simpler in this case.

I’m not sure if this will work, in any case I would not use this approach, it’s far from ideal. I would use JSON instead. the short time you invest in getting to grips with the technique will save you days of hassle.

You don’t have to use AngularJS. JQuery can do it for you too very easily.

Kanhu

Hi,

This code really works well, but i got a problem.
When i’m trying to add the jquery Datepicker to one of the fields, then the Datepicker only appears and effect the changes in the first input, it doesn’t appears in the new input fields. How to do that? Can anyone please guide me.

Use the rowAdded(rowElement) function. It will be invoked when a new row is added.
You can then use the jquery .find() function to find the field. You can then initialize a new datepicker for the field.

It sounds like the input field you are trying to attach the datepicker to has a DOM ID. If this is the case, you need to remove the DOM ID because ID’s need to be unique.
The $rowElement).find(….) will allow you to get the input field without having an ID on the element.

Hope this helps.

P.S. use JSON with angularjs or similar instead if you can. The technique in this blog is dated.

Kanhu

Thanks for giving the solution.
I tried by initializing a new datepicker by giving unique DOM ID in the rowAdded(rowElement) function, but still the datepicker is reflecting in the first input field.

For the first input my id is “openedOn0” and as i go on adding rows, the id of the new field becomes “openedOn0_1”, then “openedOn0_1_1” and so on..
So, when i am initializing new datepicker with “openedOn0_1” id, it is still reflecting to the first input that is “openedOn0” id.

//kill all datepickers in the form
$(‘.datePickerField’).datepicker( “destroy” );
$(‘.datePickerField’).unbind();
//recreate all datepickers in the form including new rows
$(‘.datePickerField’).datepicker();