DataTable using a different DataTable's editor

montoyam

This seems to work as far as being able to add/edit, but I can't get the .on("submitComplete") to fire.

Here is the layout:

1) DataTable that is 'dynamic': EquipmentOnLoanTable (no editor or buttons, but includes left join to Rates data)

2) DataTable to add Equipment Rates: EquipmentOnLoan_RatesTable, editor: EquipmentOnLoan_RatesEditor

3) DataTable showing records that are missing Rates: EquipmentOnLoan_AlertsTable. Also uses editor: EquipmentOnLoan_RatesEditor

So rates can be added in either DataTables 2 or 3.

When I add a new rate for an equipment record from either of the two DataTable buttons, I instantly see the record show up in EquipmentOnLoan_RatesTable. If I reload the page, the Rate data shows up on EquipmentOnLoanTable (remember, there is a left join to rates) and is no longer in EquipmentOnLoan_AlertsTable because the Rate is no longer missing.

However, I need EquipmentOnLoanTable and EquipmentOnLoan_AlertsTable to be reloaded after the submit instead of having the user reload the entire page. .on("submitComplete") does not seem to be firing and I can't figure out why.

$(document).ready(function () {
    

    var EquipmentOnLoanTable;

    function DynamicTablesLoad() {
        $.ajax({
            url: "api/EquipmentOnLoan",
            success: function (data) {
                var columns = [];
                if (data.length !== 0) {
                    //build the DataTable dynamically.
                    // json return:  {"Table":[{"ImportID":121,"DeptName":"Ag Commissioner","FTE":48.15,"EmployeeCount":50}...
                    columnNames = Object.keys(data.Table[0]); //.Table[0]] refers to the propery name of the returned json
                    for (var i in columnNames) {
                        columns.push({
                            data: columnNames[i],
                            title: columnNames[i]
                        });
                    }
                }

                EquipmentOnLoanTable = $('#EquipmentOnLoan').DataTable({
                    dom: 'frtip',
                    data: data.Table,
                    destroy: true,
                    rowId: 'LOANID',
                    scrollX: true,
                    columns: columns
                })
            }

        });
    }

        /*****************************************************/
       DynamicTablesLoad();

        var EquipmentOnLoan_LoanRateLinkEditor = new $.fn.dataTable.Editor({
            ajax: 'api/EquipmentOnLoan_LoanRateLink',
            table: '#EquipmentOnLoan_LoanRateLink',
            fields: [
                { label: "Loan ID:", name: "EquipmentOnLoan_LoanRateLink.LoanID", type: "readonly" },
                {
                    label: "Rate:", name: "EquipmentOnLoan_LoanRateLink.RateID", type: "select",
                    placeholder: "<Select Rate>",
                    placeholderValue: 0,
                    placeholderDisabled: false
                },
                {
                    label: "Effective Date:"
                    , name: "EquipmentOnLoan_LoanRateLink.EffectiveDate"
                    , type: 'datetime'
                    , def: AsOfCookie
                    , format: "M/D/YYYY"
                },
                {
                    label: "Expire Date:"
                    , name: "EquipmentOnLoan_LoanRateLink.ExpireDate"
                    , type: 'datetime'
                    , format: "M/D/YYYY"
                }
            ]
        });
        
        var EquipmentOnLoan_LoanRateLinkTable = $('#EquipmentOnLoan_LoanRateLink').DataTable({
            dom: 'Bfrtip',
            ajax: 'api/EquipmentOnLoan_LoanRateLink',
            columns: [
                { data: "EquipmentOnLoan_LoanRateLink.LoanID", title: "Loan ID"},
                { data: "EquipmentOnLoan_Rates.RateName", title: "Rate"},
                { data: "EquipmentOnLoan_LoanRateLink.EffectiveDate", title: "Effective Date" },
                { data: "EquipmentOnLoan_LoanRateLink.ExpireDate", title: "Expire Date" }
            ],
            select: { style: 'single' },
            lengthChange: false,
            buttons: {
                buttons: [
                    { extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditor, text: 'Add Rate' },
                    { extend: 'edit', editor: EquipmentOnLoan_LoanRateLinkEditor, text: 'Edit Rate' }
                ],
                dom: {
                    button: { tag: 'i', className: '' }
                }
            }
        });
        /*****************************************************/

        var EquipmentOnLoan_AlertsTable = $('#EquipmentOnLoan_Alerts').DataTable({
            dom: 'Bfrtip',
            ajax: 'api/EquipmentOnLoan_Alerts',
            columns: [
                { data: "LOANID", title: "Loan ID" },
                { data: "DEPTNAME", title: "Department" },
                { data: "LoanStartDate", title: "Loan Start Date" },
                { data: "LoanEndDate", title: "Date Returned" },
                { data: "COMPONENTTYPENAME", title: "Equipment Type" },
                { data: "AlertType", title: "Issue" },
            ],
            select: { style: 'single' },
            lengthChange: false,
            buttons: {
                buttons: [
                    { extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditor, text: 'Assign Rate' }
                ]
            }
        });
        /*****************************************************/
        EquipmentOnLoan_LoanRateLinkEditor.on('submitComplete'), function () {
            alert("got here");
            EquipmentOnLoan_AlertsTable.ajax.reload();
            DynamicTablesLoad();
        };
});

Regardless if I hit the editor from either the Alerts buttons or the Rates buttons, I never get to the "got here" alert and the two data tables are not reloaded.

note, the code below DOES work, however:

        EquipmentOnLoan_AlertsTable.on('select', function () {
            EquipmentOnLoan_LoanRateLinkEditor
                .field('EquipmentOnLoan_LoanRateLink.LoanID')
                .def(EquipmentOnLoan_AlertsTable.row({ selected: true }).data().LOANID);
            EquipmentOnLoan_LoanRateLinkEditor
                .field('EquipmentOnLoan_LoanRateLink.EffectiveDate')
                .def(EquipmentOnLoan_AlertsTable.row({ selected: true }).data().LoanStartDate);

        });

allan

I don't see anything obvious as to by submitComplete wouldn't be triggering them I'm afraid. Can you give me a link to a page showing the issue?

Also, do events such as preSubmit and postSubmit trigger?

Allan

montoyam

unfortunately I can't provide a link as it is on our intranet. I just tested preSubmit and postSubmit and they are not triggered either.

Is there anything else I can look at or that I can provide to look deeper?

allan

I've just spotted an error in the code above:

EquipmentOnLoan_LoanRateLinkEditor.on('submitComplete'), function () {

Note the comma after the closing parenthesis! That closing parenthesis shouldn't be there - instead use:

        EquipmentOnLoan_LoanRateLinkEditor.on('submitComplete', function () {
            alert("got here");
            EquipmentOnLoan_AlertsTable.ajax.reload();
            DynamicTablesLoad();
        });

and it should work now.

Allan

montoyam

oh my goodness.. I can't believe I missed that.

thanks. all is good now.