How can I reload summary datatable in a different html Tab when the main datatable is update.

Adewunmi.Agbato

I am working on trip Management system that allows people to request for a trip. User will enter details of their trips on a tab, The items they need for the trip on another tab on same page and the equipment they will need for the trip in the third tab. The fourth tab is a summary tab that display all the information in the three previous tab for the user to review before they submit.
.
I have the below function in JQuery that allows me to save Items into the database on the second tab when the 'SaveItem" button is clicked.

function SaveItem() {

$('#SaveItem').click(function (e) {

    QuoteRef = $('#ProId').val();
    var ItemRecId = $('#ItemRecId').val();
    var ItemId = $('#TripItem').val();
    var Quantity = $('#itemQuat').val();      
    if ($('#itemFrag').is(":checked")) {
        var Fragile = "true";
    }
    else {
        var Fragile = "false";
    }

    if ((ItemId != '' && Quantity != '') || (Quantity == '0')) {

        Modal();
                $.ajax({

                    type: "POST",
                    datatype: "json",
                    "Content-Type": "application/json",
                    url: "/api/Commons/SaveItem/" + QuoteRef + "/" + ItemRecId + "/" + ItemId + "/" + Quantity + "/" + Fragile,
                    data: { id: ItemId },
                    ajaxasync: true,
                    success: function (data) {

                        if (data.success) {

                            $('#DT_load1').DataTable().ajax.reload();
                            $('#DT_load2').dataTable().ajax.reload();
                            ResetControl();

                        }
                        else {

                            toastr.error(data.message);

                        }
                        unModal();
                    }
                });

         }
    else {
        toastr.error("Select Item and Enter Quantity");
    }

    unModal();

})

}

The function works effectively except that the first datatable "DT_Load1" only gets reloaded. The second datatable "DT_Load2" in the summary tab does not get reloaded.
I need help on how to reload the second datatable with same data in first datatable each time the additional item is added to or removed from the first datatable. I want to be able to show the second datatable in the summary Tab with some other information

The Html code for the tables are as below.

<

table class="display table table-striped table-bordered table-hover" style="width:100%" id="DT_load1">

<

table class="display table table-striped table-bordered table-hover" style="width:100%" id="DT_load2">

Any help in this regard will be highly appreciated.

Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin