jQuery/JavaScript: ids for newly appended rows

Question

I have an html table in my webpage. It is filled with information from my database.

It has this structure:

Id- Title –Author
1 – Africa – John Smith
2- Europe- Martin Coole

The table is inside a form and has an “Add More” button.

When you hit that button a modal window shows and you can append another title-author row to the table using:

//inside of the addRow function
    $('#myTable').append(“<tr><td>..”);

The table also has an edit and delete button for each row. The onclick has:

//For the edit button
 editRow(id, value1, value2);
//For the delete button
 deleteRow(id);

And here comes my problem, the ids.

The info coming from the database has a solid id (1 and 2) but how should I deal with the ids of the rows appended with the “Add More” button?

What I have done so far is getting the last id from the database rows and put it in a hidden field in my table then in my js file:

var lastID = $('#lastID').val();
var i = 1;
var newId = parseInt (lastID)+i;

newId is 3 and this is valid if one row is appended but if a second row is appended via the “Add More” button I have 3 in newId again :((

How can I fix this? How can I add consecutive ids to the newly appended rows?

At what point do you want the appended rows to be inserted into the database? — Rory McCrossan
– Rory McCrossan, Commented Jun 11, 2012 at 9:13
I'm sending the whole page information in a general "save changes" button via params with jQuey ajax. I'm not worried about saving in the database now, what I need is to solve the edit and delete thing. Thanks — lleoun
– lleoun, Commented Jun 11, 2012 at 9:15

iappwebdev · Accepted Answer · 2012-06-11 09:16:26Z

1

In your function editRow write:

var lastID = $('#lastID').val();

// Do your insertion stuff
// ...

// After insertion, raise lastID by 1
$('#lastID').val(++lastID);

answered Jun 11, 2012 at 9:16

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamiec Over a year ago

And when 2 uses happen to be using the page at the same time?

iappwebdev Over a year ago

Then there is no way to get a new ID after every inserted row. But didn't write about multiple users.

Ja͢ck · Accepted Answer · 2012-06-11 09:52:13Z

Keeping the last inserted id on the page is a bad idea; it's a kind of race condition. There are some approaches that could apply:

Immediate commit

Inside addRow() you communicate with the server directly and have it added; after the server inserted the record it will return the id and you can insert that inside your table.

Pros

The user can close the browser and added rows will still be saved.

Cons

If you're adding multiple records, the server communication may slow down data entry.
Every edit / deletion is hereby also required to make a server round-trip.

Delayed commit

You can simply mark the new records so that when you iterate over them to construct your AJAX request, you can send two separate lists to the server; one containing the existing ones (minus the deleted ones) and one containing only the new ones.

The server will then take care of the rest.

Corsair · Accepted Answer · 2012-06-11 09:17:01Z

0

During appending the new row, increment the lastId variable by 1.

A maybe better solution would be to recalculate the last Id by checking all rows in the table and update the variable.

answered Jun 11, 2012 at 9:17

Corsair

1,0543 gold badges10 silver badges25 bronze badges

Comments

Jamiec · Accepted Answer · 2012-06-11 09:22:03Z

0

If, as you say on your comments, you're submitting the whole page together as sort of like a "Save everything" kind of operation, then newly added rows should NOT have an ID. Do not fall into the trap of trying to incrememnt the last known Id by 1, as 2 concurrent users will end up overwriting each other's record.

For new rows, the delete button is obvious, it just deletes the newly added row out of the table. For updates, just update the data in that row. These new rows could be given an id of 0 so that when you submit the page you know which ones are new (Id=0) and ones which are updates (Id>0).

answered Jun 11, 2012 at 9:22

Jamiec

136k15 gold badges143 silver badges202 bronze badges

2 Comments

Timm Over a year ago

Question never asked about concurrency, stop spamming people's answers!

Jamiec Over a year ago

@Tim - Question implies concurrency, answers require thought.

Collectives™ on Stack Overflow

jQuery/JavaScript: ids for newly appended rows

4 Answers 4

2 Comments

Immediate commit

Delayed commit

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Immediate commit

Delayed commit

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related