What's the best approach to do a custom Ajax call on an edit event

What's the best approach to do a custom Ajax call on an edit event

DridocDridoc Posts: 1Questions: 1Answers: 0
edited October 2016 in Free community support

Hi all, I'm fairly new in using datatables and the editor and I was wondering what the best approach is to update a row with a custom ajax call to an asmx web service (asp.net).

Currently I can update once by writing an ajax call in an editor.on('preSubmit',...) event listener. like so:

editor.on('preSubmit', function (e, obj, action) {
        var table = $('#myTable').DataTable();
        if (action == 'edit') {
            var cdata= obj.data;

            var d = selectedrow.data(); //gets the selected row
            d.name= cdata.name;
            d.familyname= cdata.familyname;
            d.email = cdata.email;
            d.password = cdata.password
            var backup = cdata;
            cdata = JSON.stringify(cdata);

            if (backup.email.trim() == "" || backup.naam.trim() == "" || backup.voornaam.trim() == "" || backup.paswoord.trim() == "") {
                editor.close()  //close edit form (little bit of validation)
            }
            else {
                 //own ajax call to asmx web service
                $.ajax({

                    type: 'POST',
                    url: '/Service/Service.asmx/UpdateUser',
                    data: { User: cdata },
                    success: function (msg) {
                        console.log("edit post successful! " + msg.d); 

                        editor.close(); //closes form

                        selectedrow.data(d); //reloads row                        
                    },
                    error: function (msg) {
                        console.log("failed! " + msg.d);
                    }

                });
            }
        }
    });

the problem here is that my edit event can only be fired once. It doesn't finish the submit event. (I think)
I realize this approach isn't efficient at all.

I read you can define a custom ajax call in the where you initialize your editor like so:

var editor;
editor = new $.fn.dataTable.Editor({

    ajax: {
        edit: function (method, url, data, success, error){
            $.ajax({
                type: method,
                url: url,
                data: data,
                success: function (msg) {
                    console.log("edit post successful! " + msg.d);
                },
                error: function (msg) {
                    console.log("failed! " + msg.d);
                }
            });
        },
    },
    table: "#datatableuseroverzicht",
    idSrc: 'personID',
    fields: [{
        label: "name:",
        name: "name"
    }, {
        label: "family name:",
        name: "familyname"
    }, {
        label: "Email:",
        name: "email"
    }, {
        label: "password:",
        name: "password"
    }
    ]
});

But where do you define what's in the parameters of the custom ajax call (method, url, data, success, error)? Especially for the data parameter. Or is the last approach simply not possible? Whatever I try doesn't seem to work. Am I overlooking something simple?

Thanks in advance!!

*Edit: got it to work in the first method, I needed to return false after the ajax call

This discussion has been closed.