以模式更新数据表（ajax javascript）

Question

I have a modal that contains a datatable that is called from another main datatable, to raise the modal I execute the following function with their respective validations

   var getDataDiseases = function (tbody, table)
    {
        $(tbody).on("click", "button.disease-button", function ()
        {
            var data = table.row($(this).parents("tr")).data();
           
            var id = data.id;
            var fullName = data.fullName;

            if (id != null)
            {
                GetDiseases(id, fullName);
            }
            else
            {
                toastr.error('Ha ocurrido un problema, intente más tarde', "Error");
            }
        });
    }    

    getDataDiseases("#TableUsers tbody", table); 


 function GetDiseases(id, fullName)
    {  
        $.ajax({
            type: "POST",
            url: "/DiseaseTypes/GetDiseasesByUser",
            data: { id: id },
            success: function (response)
            {
                ReloadDataTableModal(response);       

                var nombreUser = document.getElementById('title-strong-diseases');
                nombreUser.innerHTML = fullName

                $("#diseases-modal").modal();
            },
            error: function (xhr, status, error)
            {
                console.log("error");
                toastr.error(error, "Error");
            }
        });     
     
    }

In the getDiseases function if the ajax call returns success, load or reload the datatable with the information answered through another function called ReloadDataTableModal which receives the information as a parameter

   function ReloadDataTableModal(response)
    {
        //Se destrute el Dt
        $('#TableDiseasesUser').DataTable().clear();
        $('#TableDiseasesUser').DataTable().destroy();

        var tableModal = $('#TableDiseasesUser').DataTable({          
            "processing": true,
            "responsive": true,
            "destroy": true,
            data: response,
            "columns": [
                { "data": "diseaseId", "autoWidth": true },
                { "data": "diseaseName", "autoWidth": true },
                { "data": "diseasedStatus", render: getToggleSwitch },

            ],
            fixedColumns: {
                heightMatch: 'none'
            },
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todos"]
            ]
        });

        var getDataDiseasesByUser = function (tbody, tableModal)
        {
            $(tbody).on("click", "input.toggle-disease", function ()
            { 
                var data = tableModal.row($(this).parents("tr")).data();

                console.log($(this));
                console.log(data);

                ActionAddDiseaseToUser(data);
            });
        }

        getDataDiseasesByUser("#TableDiseasesUser tbody", tableModal);

    }

Within this same function, I also load the "click" listening event for when the swicht is turned on or off and thus update the datatable

The problem that is occurring is that the switch only works the first time it is executed, when it is executed for the second time the data is not found in the line marked by the arrow and therefore that variable has the value of undefined

To do this I print the value of each of the "TR" of the row that calls the modal button

What the ActionAddDiseaseToUser method does is update a column in the Database and return the new Json (by backend) to populate (update) again the datatable of the modal

  function ActionAddDiseaseToUser(data)
    {
        var userDiseaseObject = {};

        userDiseaseObject.userId = data.userId;
        userDiseaseObject.firstName = data.firstName;
        userDiseaseObject.lastName = data.lastName;
        userDiseaseObject.diseaseId = data.diseaseId;
        userDiseaseObject.diseaseName = data.diseaseName;
        userDiseaseObject.diseasedStatus = data.diseasedStatus;        

        $.ajax({
            type: "POST",
            url: "/Users/AddDiseaseToUser",
            data: JSON.stringify(userDiseaseObject),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response)
            {
                if (response)
                {                   
                    ReloadDataTableModal(response);

                    toastr.success('Se ha actualizado la enfermedad ' + data.diseaseName + ' al usuario ' + data.firstName + ' ' + data.lastName, "Guardado");                
                }
            },
            error: function (xhr, status, error)
            {
                toastr.error(error, "Error");
            }
        });
    }

What's going on? Why does my logic only work the first time the switch is activated or deactivated? Why is it that the second time I click on the switch, I can't find the data in the corresponding row? I have destroyed and cleaned the datatable but it does not solve the problem... any help for me?

Answer 1

In your modal, have a table defined with an ID, a <thead> and an empty <tbody> .

<table id="TableDiseasesUser" style="width: 100%;">
    <thead>
        <tr>
            <th>Disease ID</th>
            <th>Disease Name</th>
            <th>Disease Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

In your JavaScript, define your DataTable and assign it to a variable. Because you are using POST, the ajax property needs to be an object:

const tableModal = $('#TableDiseasesUser').DataTable({          
    "processing": true,
    "responsive": true,
    "ajax": {
        method: "POST",
        url: "/DiseaseTypes/GetDiseasesByUser",
        data: { id: '' }
    }
    "columns": [
        { "data": "diseaseId", "autoWidth": true },
        { "data": "diseaseName", "autoWidth": true },
        { "data": "diseasedStatus", render: getToggleSwitch },
    ],
    fixedColumns: {
        heightMatch: 'none'
    },
    "language": {
        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
    },
    "aLengthMenu": [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "Todos"]
    ]
});

In your server side code, return your data as JSON. You haven't shown me any so I don't know which language you use, but I use PHP

$data = getMyData(); // returns an array
echo json_encode(["data" => $data]); // echo an object with property "data" that has value the $data array

Then when you want to (re-)populate your table you set the ajax.data property and call its reload() function

function ReloadDataTableModal(newID) {
    tableModal.ajax.data = { id: newID };
    tableModal.ajax.reload();
}

For your click event, refer to the table variable you defined earlier

tableModal.on('click', 'input.toggle-disease', function() {
    const data = tableModal.row($(this).closest('tr')).data();
}

And that's it. No need to call destroy() or any of that.