JQuery MVC Collection Name Attributes

Question

I have a table, and I dynamically added / removed rows from it. The table contains the fields that will be sent back as a collection in MVC. In this scenario, updating the table with jquery means that I am going to collections that contain incomplete collections, for example ...

function add() { $.ajax({ url: "GetRow", type: 'post', dataType: 'html', timeout: 30000, data: { RowIndex: otherRows.length, "Item.Property1": $("option:selected", dropDown).text(), "Item.Property2": $("option:selected", dropDown).val() }, success: function (result) { var newRow = $(result); tableBody.append(newRow); } }); } 

This function calls an ajax call to get the result of the mvc action, which returns the result of the string at the specified index and optionally sets some default values ​​from the drop-down list on my page.

Now suppose I have a similar function called “delete” in which I delete a row using jquery, and at that moment the table has 3 rows (naturally ignoring the header row), and the row I delete is the middle row.

this means that the fields in my rows look something like this ...

 //Row 1: <input type="text" name="SomeCollection[0].Property1" /> //Row 2: Nothing, deleted of course //Row 3: <input type="text" name="SomeCollection[2].Property1" /> 

So, if I now do the postback due to an inconsistent range of identifiers, the MVC middleware will only attach element 1 to me, and element 2 (actually element 3 before being deleted on the client side) is not displayed.

The idea is that I want my server logic to perform very simple “if the identifier of the item in my collection is not in the post-data, removes it from the database”, so that all manipulations with the collection can be completely client-side , except for constant postbacks on this very heavy page.

So, I started using the jquery function to fix the problem ...

 function updateNames(table) { var rows = $("tr", table); var index = 0; rows.each(function () { var inputFields = $("input"); inputFields.each(function (){ //replace name="bla[<any number>].Anything" with // name="bla[" + index + "].Anything" }); index++; }); } 

So my question is ... How can I tell jquery "replace [] in the name attribute with [index]"?

I know that this will not solve the problem of nested collections / other similar complex scripts, but for this, as soon as I enable this function, I can always extend it later, and my requirements are not yet involved.

EDIT:

Some additional details of my current thought pattern ... good or bad?

if I grab the value of the name attribute and "go through the characters" until I find the first "[" and the next "]", and then replace everything in between, it should solve my problem, but this type of thing in IE is probably slow. how the hell.

Has anyone received a neat answer "just call this smart function"? (if there).

EDIT 2:

Wow, I really need to look harder ... what a nebula that I feel now, for two reasons (not looking and regular expression is the obvious solution here)

JQuery: how to replace everything between certain characters?

if I can find the right regex, I have my solution (maybe the question I should have asked, because the insanity of the regex is constantly annoying me).

But the power of regex cannot be appreciated :)

Answer 1

This should work for you:

 function updateNames(table) { var rows = $("tr", table); var index = 0; rows.each(function () { var inputFields = $(this).find("input"); inputFields.each(function (){ var currentName = $(this).attr("name"); $(this).attr("name", currentName.replace(/\[(.*?)\]/, '['+index+']')); }); index++; }); } 

If there are several inputs on each line and you just want to update them, then consider using the jQuery selector: "starts with": http://api.jquery.com/attribute-starts-with-selector/ .

Answer 2

Although you already have permission, I thought that a useful demonstration of how to implement this function from scratch might be useful.

Suppose you have a button with a delete class on each line, you can achieve this as follows:

 $('.delete').click(function(e) { // Get table body and rows var body = $(this).closest('tbody'); // Remove current row $(this).closest('tr').remove(); // Get new set of rows from table body var rows = body.find('tr') // Update all indeces in rows var re = new RegExp(/\[[0-9]+\]/); var index = 0; rows.each(function () { $(this).find('input').each(function (e) { var input = $(this).attr('name'); if (input) { $(this).attr('name', input.replace(re, '['+index+']')); } }); index ++; }); }); 

This should remove the row and update all the indices for each input in the remaining rows so that they grow again (and therefore will be correctly snapped using the model linker). In addition, it should be limited to the current table. Here he is in action.