Get all values from dynamically generated child rows

jamesamuir

Relevant JSFiddle

https://jsfiddle.net/jamesamuir/6equorzm/26/

I have a simple data set of accounts where I would like the customers to be able to adjust the amounts that they would like to pay. Each account can have multiple invoices with arbitrary amounts.

I have utilized the initComplete option and the this.api().rows().every() function to add a child table and a table row for every invoice that includes a text input by which they can set the amount that they wish to pay.

When i go to submit the form i cannot seem to get a reference to the dynamically added inputs. Using table.$('input').serialize(); generates an empty string. Iterating the form $('#exampleForm').find(".adjustable-amount").serializeArray() only returns visible elements. The values are apparently stored somewhere as they are persisted when i navigate pages.

Can someone point me in the right direction as to how to get a reference to those dynamically generated inputs? Many thanks in advance.

kthorngren

Its part of your Datatables row data using:

            {
                data: 'PaymentDocuments',
                visible:false
            }

My suggestion would be to use one of the data API's like row().data() or cell().data() to get the data. This means that you will need to keep up with the inputs and when changed update Datatables data cache with the same API's.

Kevin

jamesamuir

Thank you for the response. I am not sure that I understand however. Inspecting table.rows().data() and expanding PaymentDocuments displays the original value of the data but not the updated value for the input. It sounds like you are suggesting that I need an onchange event bound to the input and would need to track any changes manually for the value?

kthorngren

Updates via HTML methods won't update the Datatables cache. Datatables doesn't know of the change. When the change is made you need to tell Datatables of the change via one of the data methods.

Kevin