On select function stores selects?

Rawland_Hustle

I have a strange problem...

My site consists of three tables.

The second table only becomes visible when the user selects a row in the first table and an API is called in order to get data for the second table.

The third table only becomes visible when the user selects a row in the second table and an API is called in order to get data for the third table.

When I select a row in the first table, then a row in the second table, everything works fine.

However, If I select a row in the first table, then another row (which deselects the first selected row), then another row (which deselects the second selected row), then select a row in the second table - the function that makes the API call gets fired **three **times(!?). One time for each time I made a selection in the first table.

It's like the serviceConsumersTable.on( 'select', function () {....} stores how many times I have selected/deselected rows in the table.

Link: http://themeadow.se/takdata/

let baseURL = "http://api.ntjp.se/coop/api/v1/";

var ntjpProdConnectionPointId;

var ntjpQaConnectionPointId;

var serviceConsumersTable;

var serviceContractsTable;

var selectedServiceConsumer;

var selectedServiceContract;


$(document).ready(function(){

    getConnectionPoints();

});

$.ajaxSetup({
    type: 'GET',
    dataType: "json",
    delay: 1
});

function getConnectionPoints() {
    return $.ajax({
        url: baseURL + "connectionPoints",
        success: function(result){
            processConnectionPoints(result);
        }
    });
}

function processConnectionPoints(data) {

    var connectionPointsArr1 = $.grep(data, function(element, index) {
        return element.platform == "NTJP" && element.environment == "PROD";
    });

    var connectionPointsArr2 = $.grep(data, function(element, index) {
        return element.platform == "NTJP" && element.environment == "QA";
    });

    ntjpProdConnectionPointId = connectionPointsArr1[0].id;

    ntjpQaConnectionPointId = connectionPointsArr2[0].id;

    getServiceConsumers();

}

function getServiceConsumers() {

    return $.ajax({
        url: baseURL + "serviceConsumers?connectionPointId=" + ntjpProdConnectionPointId, //Hårdkodad för NTjP Prod
        success: function(result){
            processServiceConsumers(result);
        }
    });

}

function processServiceConsumers(data) {

    $("#serviceConsumersWrapper").show();

    serviceConsumersTable = $('#serviceConsumersTable').DataTable( {
        data: data,
        dataSrc: "",
        columns: [
                { data: "id", orderData: 2 },
                { data: "hsaId" },
                { data: "description" }
            ],
        select: true,
        pageLength: 25
    } );

    serviceConsumersTable.on( 'select', function () {

        $("#serviceProducersWrapper").hide();

        if (serviceContractsTable instanceof $.fn.dataTable.Api) {
            serviceContractsTable.destroy();
        }

        selectedServiceConsumer = serviceConsumersTable.rows( { selected: true } ).data()[0].id;

        getServiceContracts();

    } );

}


function getServiceContracts() {

    return $.ajax({
        url: baseURL + "serviceContracts?serviceConsumerId=" + selectedServiceConsumer + "&connectionPointId=" + ntjpProdConnectionPointId, //Hårdkodad för NTjP Prod
        success: function(result){
            processServiceContracts(result);
        }
    });

}

function processServiceContracts(data) {

    $("#serviceContractsWrapper").show();

    serviceContractsTable = $('#serviceContractsTable').DataTable( {
        data: data,
        dataSrc: "",
        order: [[5, 'asc']],
        columns: [
                { data: "id"},
                {
                    data: "namespace",
                    render: function ( data, type, row, meta ) {

                        split_array = data.split(':')
                        ans = split_array.splice(-2).join(':')

                        var trimmeddata = ans.substring(0, ans.length - 11);
                        return trimmeddata;
                    }
                },
                { data: "major" },
                { data: "minor" },
                { data: null, visible: false},
                {
                    data: "name",
                    render: function(data, type, row, meta) {

                        return '<i class="fas fa-info-circle" style="color: Dodgerblue;" data-bs-toggle="popover" data-bs-placement="top" title="About" data-bs-content="' + data + '"></i>';

                    }
                }

        ],
        select: {
            style: "single",
            selector: "td:not(:last-child)"
            },
        pageLength: 25,
        rowGroup: {
            dataSrc: function(row) {
                data = row.namespace;
                split_array = data.split(':');
                ans = split_array.splice(-2).join(':');

                cut_off_part = split_array.join(':');

                return cut_off_part;
            }
        }
    } );

    serviceContractsTable.on( 'select', function () {


        if (serviceProducersTable instanceof $.fn.dataTable.Api) {
            serviceProducersTable.destroy();
        }


        selectedServiceContract = serviceContractsTable.rows( { selected: true } ).data()[0].id;

        getServiceProducers();

    } );

    // Make info icons Boostrap 5 popovers
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });

}

function getServiceProducers() {

    return $.ajax({
        url: baseURL + "serviceProducers?serviceConsumerId=" + selectedServiceConsumer + "&serviceContractId=" + selectedServiceContract + "&connectionPointId=" + ntjpProdConnectionPointId, //Hårdkodad för NTjP Prod
        success: function(result){
            processServiceProducers(result);
        }
    });

}

function processServiceProducers(data) {

    $("#serviceProducersWrapper").show();

    serviceProducersTable = $('#serviceProducersTable').DataTable( {
        data: data,
        dataSrc: "",
        columns: [
                { data: "id", orderData: 2 },
                { data: "hsaId" },
                { data: "description" }
            ],
        select: true,
        pageLength: 25
    } );

}

kthorngren

You test case doesn't load for me for the same reason I noted in your other thread.

It's like the serviceConsumersTable.on( 'select', function () {....} stores how many times I have selected/deselected rows in the table.

Not sure I understand what you mean. The events aren't stored - they are fired each time you select a row. Maybe the problem is with outstanding ajax requests when you select another row. What do you see happening?

Kevin

Rawland_Hustle

I recorded my screen so you can see what's happening. Watch dev tools at the bottom of the video, the amount of API calls keeps adding up based on how many times I click the first table.

The first time I click the second table one API call is made. This is expected behaviour. The second time I click the second table two API calls are made. This is unexpected behaviour. The third time I click the second table three API calls are made. This too is unexpected behaviour.

https://youtu.be/p2vK_i25EWs

kthorngren

Sorry, misunderstood. I thought the problem was with the serviceConsumersTable.on( 'select', function () {....}. Everytime you call processServiceContracts() you are creating an additional event handler. The third time you call the function you will have 3 event handlers created.

One option is to turn off the event handler before creating it. Change line 162 to something like this:

serviceContractsTable.off( 'select').on( 'select', function () {

Kevin

Rawland_Hustle

Oh, I see. That fixed it. Thanks a ton!