1

What my code does:

  • An "Add Item" button brings up a popup (#addquoteitem) that contains a form
  • submission of that form 1. creates a new row in a table, from a template and 2. creates hidden inputs (not hidden in jsfiddle) because I thought this was easiest way to submit the data to server
  • A "submit quote" button then submits each of these rows individually to the server via the "hidden input" form

I did not realize until I was done ( I am working on my first big project ), The user can not edit their individual items!!!

What I think I should do:

  • Add an edit button for each row that brings up a popup, which would use jquery to change the values of the corresponding rows
  • Then change it so the "hidden inputs" are not created until the final "submit quote" button is pressed.

JSFIDDLE http://jsfiddle.net/SteveRobertson/XHuVS/1/ JSFIDDLE

My Question: Is my approach the correct method? I only ask because I do not think it is, but feel as though I have coded myself into a corner. I have no idea what to do. if not. What is the correct method for dynamically editing rows in a manner they can be submitted to a server? When I call this function for the template, I assume I have to add a counter of some sort to give each row a unique ID, or can the row be identified in another manner?

  function template(row, quoteItem) {
    row.find('.item_num').text(quoteItem.number);
    row.find('.item_desc').text(quoteItem.description);
    row.find('.item_price').text(quoteItem.price);
    return row;
  }

Although I do no know how exactly to do most of the methods my approach entails I only ask for a point in the right direction. I understand this is a lengthy question as well as lengthy code. I appreciate you taking the time to read this and any suggestions or advice. Thank You.

Four_lo
  • 1,150
  • 10
  • 28

1 Answers1

1

I agree with your planned approach, generate the form data at the time of submission. This will save you the trouble of keeping the hidden fields updated.

Hidden fields:

Your current code generates elements with the same ID testid. You can remove the ID since they are not going to be used for anything. If you do require the IDs, make sure they are unique.

The naming of the element generated do not indicate any relationship between them, I'd suggest a naming scheme like:

items[0].name
items[0].description
items[0].price
items[1].name
items[1].description
items[1].price
...

You can also consider submitting the form via AJAX. In this case you can construct the form data object on submission. It could look like:

[ 
  {name: 'Item 1', description: 'first item', price: '123'},
  {name: 'Item 2', description: 'second item', price: '234'},
  ...
]

Here's a question that shows how to handle this on the server-side with PHP.

Row generation:

You could add a unique ID to the rows being generated, but only if you need to address the rows individually. Using a counter to generate a value which is appended to a string will work for generating the unique IDs.

Editing:

One solution for the edit option would be to bind the click event on the table and check for the edit link using the on function.

$('#quote').on('click', '.edit-link', function (e) {
  e.preventDefault();
  //$(this) - edit link
  //$(this).closest('tr') - parent table row
  //$(this).closest('tr').find('.item_num') - span containing number of items
  //$(this).closest('tr').find('.item_num').text() - number of items
  ...
});

Table Row

<tr>
    <td><span class="item_num">1</span></td>
    <td><span class="item_desc">rt</span></td>
    <td><span class="item_price">asd</span></td>
    <td><a href="#" class="edit-link">Edit</a></td>
</tr>

Store the parent's (TR's) reference (ID or object) to update the values once the editing is complete.

This isn't a comprehensive solution, but I hope it gives you a few leads to follow.

Community
  • 1
  • 1
Vimal Stan
  • 2,007
  • 1
  • 12
  • 14