Duplicate on add new row using instances.

tantan

Im initializing Datatables through instances:

                      $.each(data, function (index, item) {
                            var table_name = item.job_order_id + index;                              // to name the table
                            var scope_id = item.job_order_id + '-' + item.actual_po_no;       // extra data

                            createMultiTable(table_name, item.actual_po_no);                     // appends new table on html

                            // Create Datatable
                            var datatable = createDataTable(table_name);                            // create datatable instance

                            // Load Scopes
                            loadScopes(scope_id, datatable);                                                // load data to table using ajax with extra data
                        });                                                                                                     

This loads correctly with buttons, add, edit, remove

I'm accessing table instance through:

       $(document).on('click', '.add-row', function () {                                                    // when clicking row inside the datatable
            var table_name = $(this).parents('table').attr('id'); // get table id

            var datatable;
            if ($.fn.dataTable.isDataTable('#' + table_name)) {                                         // get instance of the table
                datatable = $('#' + table_name).DataTable();
            }

            showAddModal(datatable);
        })

Updating and Deleting seems fine but when adding using modal:

        $('#scope-modal .modal-footer').find('#modal-add').on('click', function () {
        datatable.row.add([
                        $('#scope_description').val(),
                        $('#scope_amount').val(),
                        $('#scope_status').val()
                         ]).draw();
                     }

First add --> OK
Second add --> It duplicates the value it saves
Third add -- > Triples

I seems not to find the problem since it works on single table with no instance.
other error occured as well like adding in the second generated datatable still adds on the first one.

tantan

Solved it...

$(document).on('click', '.add-row', function () {
var table_name = $(this).parents('table').attr('id'); // get table id

 var datatable;
 if ($.fn.dataTable.isDataTable('#' + table_name)) { 
     datatable = $('#' + table_name).DataTable();
 }

 showAddModal(datatable);

})

removed:

var datatabe; set it as global var.