how to update datatables ajax params, when i click save in the browser.

dos4ever

hello everyone! i'm trying to update the one row with button save, but i get no parameters when i click save button!
please if u have any idea help me!

function loadTable() {
    $.ajax({
        url: "/rest/Inventory/List",
        method: "GET",
        dataType: "json",
        cache: false,
        success: function (r) {
            var data = r.items,
            persons = r.persons,
            types = r.types,
            locations = r.locations,
            dataSet = [];
            
            for ( var i = 0; i < data.length; i++) {
                
                var typeOptions = "<option value=\"0\">No type</option>";
                var personOptions = "<option value=\"0\">No Person</option>";
                var locationOptions ="<option value=\"0\">No Location</option>";
                if (data[i].type == undefined)
                var type_name = ''
                else {
                    var type_name = data[i].type.name;
                }
                if (data[i].location == undefined)
                var location_name = ''
                else {
                    var location_name = data[i].location.name;
                }
                
                for (var t = 0; t < types.length; t++){
                    if (data[i].type != undefined && types[t].id === data[i].type.id){
                        typeOptions += "<option selected=\"selected\" value=\"" + types[t].id + "\">" + types[t].name + "</option>";
                        } else {
                        typeOptions +=  "<option value=\"" + types[t].id + "\">" + types[t].name + "</option>";
                    }
                }
                
                for(var a = 0; a < persons.length; a++) {
                    if (data[i].person != undefined && persons[a].id === data[i].person.id) {
                        personOptions += "<option selected=\"selected\" value=\"" + persons[a].id + "\">" + persons[a].name + "</option>";
                        } else {
                        personOptions += "<option value=\"" + persons[a].id + "\">" + persons[a].name + "</option>";
                    }
                }
                
                for(var l = 0; l < locations.length; l++) {
                    if (data[i].location != undefined && locations[l].id === data[i].location.id) {
                        locationOptions += "<option selected=\"selected\" value=\"" + locations[l].id + "\">" + locations[l].name + "</option>";
                        } else {
                        locationOptions += "<option value=\"" + locations[l].id + "\">" + locations[l].name + "</option>";
                    }
                }
                
                dataSet.push([
                    data[i].id,
                    "<input value=\"" + data[i].device + "\"></input>",
                    "<select>" + typeOptions + "</select>",
                    "<input value=\"" + data[i].additionalInfo + "\"></input>",
                    "<input value=\"" + data[i].serialNumber + "\"></input>",
                    "<select>" + personOptions + "</select>",
                    "<select>" + locationOptions + "</select>",
                    "<button class='save'>Save</button><button class='delete'>Delete</button>"
                ]);
            }   
            $('#data-table').DataTable({
                data: dataSet,
                columns: [
                    { title: "Id" },
                    { title: "Device" },
                    { title: "Type"},
                    { title: "Additional Info" },
                    { title: "Serial Number" },
                    { title: "Person" },
                    { title: "Location" },
                    { title: "Actions" }
                ],
                "rowCallback": function (row, data) {
                    $(row).find("button.save").off("click").on("click", function () {
                        save_row(data[0]);
                        console.log(data)
                    });
                    $(row).find("button.delete").off("click").on("click", function () {
                        delete_row(data[0]);
                    });
                }
            });
        },
        statusCode: {
            401: function (){
                window.location.href = "login.php";
            }
        }
    });
}

function save_row(id){
    $.ajax({
        type: 'PUT',
        url: '/rest/Inventory/updateItem/'+ id,
        data: {data: "", id: "", device: "", type: "", additionalInfo: "", serialNumber: "", person: "", location: ""},
        dataType: 'json',
        success: function (r){
            
            if (r == "success"){
                alert("data are updated!");
            }
        }
    });
}

colin

Hi @dos4ever ,

There's a lot of code going on there... 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

kthorngren

In your click events the variable data doesn't exist. You would need to write code to get the clicked tr then get the row data from that. Also you can use jQuery delegated events to create the events just once instead of each rowCallaback`. See if this example helps:

http://live.datatables.net/xijecupo/1/edit

Kevin