Cloning a group of table rows

[ShadowMage]

Hey guys I have a table that displays part information for several types of skylights. I need to be able to clone the structure of one of those types and update the ids of several cells. Here's a sample table:

<table>   <tr>	  <th colspan='3'>Skylight 1</th>   </tr>   <tr>	  <td>PartNum</td><td>Length</td><td>Quantity</td>   </tr>   <tr>	  <td id='part_frame_1'>xxxx</td>	  <td id='len_frame_1'>120</td>	  <td id='qty_frame_1'>5</td>   </tr>   <tr>	  <td id='part_rafter_1'>xxxx</td>	  <td id='len_rafter_1'>120</td>	  <td id='qty_rafter_1'>5</td>   </tr></table>

I need to clone everything starting with "Skylight 1" row and ending with the last part in the list. Then I need to update the id's of each cell in the part rows (the 'part_frame_1') to point to the new type. Ie, 'part_frame_1' needs to become 'part_frame_2'My problem is, I don't quite know how I should distinguish these rows from each other. There may be several types already in the table, but I only want to clone one. I know I could add a class name to each row (like 'type1', 'type2', etc) and use getElementsByClassName and loop through each row with a specific classname, cloning it. I'd probably also have to add a class name to the part rows so I can loop through them to change the id's. I'm not sure if this is the best approach though.Any advice is appreciated.

[thescientist]

Is it possible to do it on the server side somehow? How is the data being generated? Would it be possible to get it while its in JSON/XML form, so you can get all the data and manipulate while it's still in string form, before become HTML? You could create some sort of function/class server side that has a "VIP" list of specific products that should get cloned during the data structure creation process, and update the data structure internally.So, say you have a list of products being generated from a database, and say you make a JSON object out of that. You could create a parsing function, that can be configured to look for certain key/value pairs (i.e. Skylight1) and if it comes across that, you could instruct that function to clone that and add it to the complete object, and modify the clone with convention appropriate property values to be supported by the client side application.

[ShadowMage]

Well, I am using a JSON object to get the data that will be used to populate this newly cloned group of rows. That looks kind of like this:

[{   "Frame": {	  "HS": {		 "1": {"Part": "1290", "PcLength": 252, "Pieces": 4}, 		 "2": {"Part": "1291", "PcLength": 252, "Pieces": 4}}, 	  "J": {		 "1": {"Part": "1290", "PcLength": 180, "Pieces": 4}, 		 "2": {"Part": "1291", "PcLength": 180, "Pieces": 4}}},    "Rafters": {	  "R": {		 "1": {"Part": "1219", "PcLength": 177.5625, "Pieces": 8}, 		 "2": {"Part": "1218", "PcLength": 179.5625, "Pieces": 8}, 		 "3": {"Part": "0141", "PcLength": 179.5625, "Pieces": 8}}}},{   "Frame": {	  "HS": {		 "1": {"Part": "1290", "PcLength": 252, "Pieces": 6}, 		 "2": {"Part": "1291", "PcLength": 252, "Pieces": 6}}, 	  "J": {		 "1": {"Part": "1290", "PcLength": 180, "Pieces": 6}, 		 "2": {"Part": "1291", "PcLength": 180, "Pieces": 6}}},    "Rafters": {	  "R": {		 "1": {"Part": "1219", "PcLength": 177.5625, "Pieces": 10}, 		 "2": {"Part": "1218", "PcLength": 179.5625, "Pieces": 10}, 		 "3": {"Part": "0141", "PcLength": 179.5625, "Pieces": 10}}}}]

The JSON is retrieved via AJAX. Hmm...never really thought about looping through the JSON object. I was doing it the other way around. Looping through the cells in each part row, using the id to access the data in the JSON object. Thanks, scientist. This might be the way to do it. Of course, additional advice is still welcome.

[thescientist]

Basically, I would view this as getting an array of products from the DB, wherein each index is an object defining all your properties of each product. As you loop through each index in the array, if that index's product name matches any of your "reserved" products (could be stored in an array of products, each referencing an object, or whatever contextual data you need), then send that entire index to a JSON cloning function, that can replace the product name with the reserved name, and then incorporate the data to the cloned object, or whatever the criteria is for your data cloning. Once you have your cloned object, save it in a new "products to be added array". After you've looped through all your products and made all your clones, just push the new array of cloned products onto the original products array. From there you can sort them alphabetically or whatnot before sending it to the client.

[ShadowMage]

I think you lost me with that one...:)When the user adds a skylight, a request is sent to the server with the dimensions for the skylight, and the server sends back a JSON object with information for all the skylights. So I need to loop through the JSON and update, if necessary, existing skylights and add the skylights that do not yet exist in the table. What I had been doing previously was looping through the cells in the table and retrieving the data from the JSON object using the id (split on the _ character) for the indexes. My problem then, was how to add another skylight. So I thought I'd initiate some sort of cloning process when the user added the skylight (but before the request was sent to the server). However, I think now I should be looping through the JSON object and updating cells where necessary and inserting rows where necessary.

[boen_robot]

However, I think now I should be looping through the JSON object and updating cells where necessary and inserting rows where necessary.

I think that was sort of thescientist's point.You could make it easier on yourself by having a separate HTTP request for every action, and update everything accordingly in each. Deleting a bunch of items? HTTP request. Inserting some? HTTP request. Editing a value in one? HTTP request. In all cases, the client can be responsible for the immediate update... the HTTP request would be just to actually do the changes.

[thescientist]

I think I just didn't understand the implementation of your UI (I was assuming/envisioning an upfront backed process). Now I get how the various communiques are happening.You could just do the merge on the backend and resend a new, updated JSON object to the client and have it redraw the table given all the new information. However, depending on how slow this process could be, being able to target specifically the rows to be changed/updated would be the most ideal.edit: To beon's point... being able to create a unique HTTP request for each edit/delete/update would probably be great. Depending on the action (say add), you could pass the products object to your server-side script, and do some merging, adding, cloning, etc, and then send that entire result set back, and update that particular section of the table. I would say without really seeing your UI, it might be harder to provide any real specifics, but I think delegating duties (add, update, insert, delete, etc) would allow for more flexibility and control over specific processes to be done based on the action.

[ShadowMage]

You could make it easier on yourself by having a separate HTTP request for every action, and update everything accordingly in each. Deleting a bunch of items? HTTP request. Inserting some? HTTP request. Editing a value in one? HTTP request. In all cases, the client can be responsible for the immediate update... the HTTP request would be just to actually do the changes.

That's what I want to eventually accomplish. Right now I just have about a half dozen separate requests for various actions. All inputs are assigned to one of these requests, but there is a lot of information being refreshed that doesn't need to be. I need to figure out how to isolate these changes so that I am only requesting and receiving the information I need, but it is a very complicated UI and I haven't quite figured out how to do this yet.

You could just do the merge on the backend and resend a new, updated JSON object to the client and have it redraw the table given all the new information. However, depending on how slow this process could be, being able to target specifically the rows to be changed/updated would be the most ideal.

I am doing the merge on the backend and sending an updated JSON object. I agree it probably wouldn't be the best idea to redraw the entire table. What I might do is reconstruct the id using the indexes in the JSON object as I loop over it and use that to update the appropriate fields for skylights that already exist. When I come to a new skylight that isn't in the table yet, I'll have to add those rows. Thanks for pointing me in the right direction.

[ShadowMage]

To beon's point... being able to create a unique HTTP request for each edit/delete/update would probably be great. Depending on the action (say add), you could pass the products object to your server-side script, and do some merging, adding, cloning, etc, and then send that entire result set back, and update that particular section of the table. I would say without really seeing your UI, it might be harder to provide any real specifics, but I think delegating duties (add, update, insert, delete, etc) would allow for more flexibility and control over specific processes to be done based on the action.

Yes, indeed. I certainly agree. Unfortunately, about the best I can do to show you the UI is post a screen shot of it since this is an application on the company intranet. Do you think I should post one?

[boen_robot]

While doing the HTTP request, you already posses the modified data, or on the very least, direct pointers to it. Use them in the JavaScript after you've sent the HTTP request. Don't refresh based on what the server says - that would happen without AJAX. At best, just wait for it to confirm the changes were made, and proceed updating.

[ShadowMage]

While doing the HTTP request, you already posses the modified data, or on the very least, direct pointers to it. Use them in the JavaScript after you've sent the HTTP request. Don't refresh based on what the server says - that would happen without AJAX. At best, just wait for it to confirm the changes were made, and proceed updating.

I need to wait for the server's response because I am updating costs, square footage, and part dimensions based on changes made. It doesn't make sense to duplicate the calculations in JavaScript.

[boen_robot]

Ah. OK then. In that case, along with the data to modify, you might want to send all such "sensetive" parts to the server to tell it how they look to you before modification. If they're modified, the server could respond with the modifications to them for JavaScript to then just replace.

[ShadowMage]

Ah. OK then. In that case, along with the data to modify, you might want to send all such "sensetive" parts to the server to tell it how they look to you before modification. If they're modified, the server could respond with the modifications to them for JavaScript to then just replace.

Hmm...well, I'll have to give this a whirl and let you know how I get on. Thanks a bunch for your input guys. I've been spinning my tires for a while on this, but I think you guys helped me gain a little traction.