Getting data from dynamically added table rows

Question

I have a Django invoice project, which has a back-end with products, manufacturer, etc.

Now there is a bill table with the columns headings: Product ID, Product Name, Product Price, Product Quantity, Taxes, Total, etc

With an add row button users can add rows for next product (ie, dynamically added rows).

What I now want is to bind jQuery event-listener with each Product ID columns(i.e. if I have 5 rows for 5 products, each row should have a Product ID column), such that as the user inputs (and edits) the product ID, I can - with the help of AJAX-fill the remaining columns.

My doubt is how to do that.

Also, as I get the AJAX data back, how do I identify the row to add the data (Product Name, Product Price, etc) to?

EDIT 1

I am generating the dynamic rows with the following code:

function generateTableRow() {
var emptyColumn = document.createElement('tr');

emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' +
    '<td colspan="2"><span contenteditable></span></td>' +
    '<td><span contenteditable>100.00</span></td>' +
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>'+
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>'+
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>' ;



return emptyColumn;
}

Note that the first span has class: "itemcode"

This is my jquery code:

$("#inventory_table .itemcode").on("focus", function(){
alert( "On focus for table inventory called." );

alert($(this).text());
});

the table id is "inventory_table".

This jquery event-listener is not getting bound with the dynamically generated rows.

Any help is appreciated.

Thanks

omnichad · Accepted Answer · 2016-03-30 16:18:38Z

1

Assuming you have a table like this:

<table id="products">
<tbody>
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr>
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr>
</tbody>
</table>

You would attach a listen event to the class:

$( "#products .productid" ).on( "change", function() {
 // do your AJAX here
});

You can pass $(this) to the callback function on the AJAX response to get the row. From there, you can jump to the 2nd, 3rd column.

$(this).closest('tr').find('td:nth-child(2) input').val(x) // Insert value for second column
$(this).closest('tr').find('td:nth-child(3) input').val(y) // Insert value for third column

And any blank new row you add will have the same functionality if the input has a class of .productid

answered Mar 30, 2016 at 16:18

omnichad

1,6551 gold badge12 silver badges10 bronze badges

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

7 Comments

Sayantan Over a year ago

Kindly look at my edit, there seems to be some issue. Request your help

omnichad Over a year ago

I don't think a span can receive "focus". If you're making a span contenteditable, why not just use <input type="text"> instead? See this jsfiddle for an example: jsfiddle.net/c9keLynn

Sayantan Over a year ago

I just checked with input as well, it is not working. And span receives focus-blur. On Focus, followed by on blur is a substitute for on change (which can only be used for inputs). To bind with the dynamically created elements, I just called the named function - whose work is to add event listener (the 2nd part of my code), every time a new row is added.

omnichad Over a year ago

What version of jQuery are you in? You might need to use live() instead of on(). Live is supposed to bind dynamically, but is replaced with on in later versions.

Sayantan Over a year ago

I'm with jQuery 1.12.0 . I see your point!! But I believe 1.12 should have live replaced. Either ways, I need to check that.

|

Collectives™ on Stack Overflow

Getting data from dynamically added table rows

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related