Dynamic table row not being updated via jquery ajax call

Question

Hi there,

Having a bit of a hairy issue when submitting data over a jquery ajax call. Basically, form values of form fields which have been dynamically added to the screen into a tubular grid using jquery are not updating on a batch save command.

Basically I have a grid listing which displays all current rows saved to the database with each column containing form fields. I then have a form at the top of the page, which is your typical add another detail form. You type your values, press "add" this is saved to the database via a jquery json ajax call, and your form data is added and reflected in a new row in the listings table. (this part works)

My problem lies with when you wish to change the form values within the newly added jquery table row. When the save button is pressed, only any of the already built table row's will be re-saved. Your dynamic row form data does not save. The update call uses jquery ajax and ASP.NET MVC model binding. On the "add" I am returning an asp.net mvc "partial view" to my jquery ajax response and it is being added to a grid listing table using $("#tablename tr:last").after(result).

What I have deduced already is, as said, the new dynamically added row does not update. I have an IList<Item> set returned in my MVC model binding list to my controller action method which contains the entire list of items, minus the newly created jquery dynamic-added form field rows. This is the problem and why when you perform a page refresh, the rows are back to the original form values entered on initial add.

Any ideas why my IList<Item>'s would not include these dynamically added rows? Inspecting in Firebug they use the same naming convent in their name attribute and all should be fine.

Graham.

Update 1 May 11:00 GMT+10: I do receive the values when changing the Model Binding from IList to FormCollection. I do not want to have to use FormCollection rather than model binding, but it begs the question if I can get it correctly through FormCol, why not IList model binder? I have compared the array entry to a working item, and they all fit the same criteria and values.

Answer 1

Use the plugin livequery for what you are trying to do. You can find it here - http://docs.jquery.com/Plugins/livequery

This does not work on most dynamically added elements:

$("select something").onSomeEvent("do something");

But with livequery plugin you can make it work by changing your JS code to something like below:

$("select something").livequery('event name','do something');

Answer 2

I'm not an ASP programmer, but I do a heck of a lot of jquery work. If I understand your problem correctly, your dynamically generated rows are not being bound to the callback functions that will perform your update operations.

You can bind the dynamically generated elements to a callback by either using the jQuery 'live' function (as Wikidkaka was trying to tell you) or you can bind the newly created elements manually in the callback function that is fired when the ajax call returns.

I would recommend using the native live function that was added in (I believe) the latest release of jQuery. It will save you from having to write additional lines to manually bind the callbacks and makes code maintenance easier.

So change:

$('div.your-save-buttons').click(updateFunction);

to

$('div.your-save-buttons').live(updateFunction);

Answer 3

If the property on your Model is a list of integers, you can use IEnumerable<int> to get automatic model binding. This works both for an Action method whose parameter is an IEnumerable<int> and an Action method whose parameter is a Model that has a property which is an IEnumerable<int>. For example, like this:

<%= Html.Hidden("myField", 1) %>
<%= Html.Hidden("myField", 1) %>

and

public ActionResult Update(IEnumerable<int> myField) { }

or

public ActionResult Update(MyModel myModel) { }
public class MyModel {
    public IEnumerable<int> myField { get; set; }
}