Problems setting field value in Editor

PaulVickery

Please can someone help me with this as I cannot see what I am doing wrong.

I am trying to set the value of a field when there has been a change to another. In the cutdown example below, if the value of the test.name field is changed during an edit, I want to programmatically update the test.nameStatus field with "Name Changed" when the record is saved. (line 47)

The output from console.log works fine, its just that I cannot seem to set the test.nameStatus field. I have tried preEdit and preSubmit. I realise there is no logic to this example, but I have reduced it to this to illustrate my issue.

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.test.php',
        table: '#test',
        submit: 'allIfChanged',
        fields: [
            {
                "label": "name:",
                "name": "test.name"
            },
            {
                "label": "Name Status:",
                "name": "test.nameStatus"
            }
        ]
    } );

    var table = $('#test').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.test.php',
        columns: [
            {
                "data": "test.name"
            },
            {
                "data": "test.nameStatus"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

        var previousName;
        editor.on('initEdit', function () {
        previousName = this.val('test.name')
        });

        editor.on('preEdit', function () {
        if (previousName !== this.val('test.name')){
        editor.field('test.nameStatus').set('Name Changed');
        console.log('Name Changed');
        }
        }); 
} );

}(jQuery));

Thank you in advance.

rf1234

I am trying to set the value of a field when there has been a change to another.

That is the most frequent use case for "dependent".
https://editor.datatables.net/reference/api/dependent()

Here are some examples from my own coding. You can also have dependencies on arrays of fields. Don't forget the callback! Can be a little tricky if you have asynchronous ajax calls in your code.

editor
    .dependent('ctr.automatic_prolongation', function (val, data, callback) {
        if (val == '1') {
            this.show(['ctr.prolongation_months', 'ctr.last_day_month']);
        } else {
            this.set({'ctr.prolongation_months': 0, 'ctr.last_day_month': 0})
                .hide(['ctr.prolongation_months', 'ctr.last_day_month']);
        }
        callback({});
    })
    .dependent(['ctr.last_day_month', 'ctr.prolongation_months'], function (val, data, callback) {
        if ( this.val('ctr.end_date') > '' ) {
            getAutomaticNextCtrEndDate(this, callback);
        } else {
            callback({});
        }
    })
    .dependent('ctr.follow_up_days', function (val, data, callback) {
        getCtrExpirationReminderDate(this, callback);
    })
    .dependent(['ctr.end_date', 'ctr.expired'], function (val, data, callback) {
        if ( ! ctrEndDateStandardDependencies(this, callback) ) { //callback not done asynchronously
            callback({});
        }
    });

....
function getAutomaticNextCtrEndDate(that, callback) {    
    $.ajax({
        type: "POST",
        url: 'actions.php?action=automaticNextCtrEndDate',
        data: { endDate:            that.val('ctr.end_date'),
                prolongationMonths: that.val('ctr.prolongation_months'),
                lastDayMonth:       that.val('ctr.last_day_month')
        },
        dataType: "json",
        success: function (data) {
            that.field("ctr.prolongation_months").message(data.message);
            callback({});
        }
    });
}
function ctrEndDateStandardDependencies(that, callback) {
    if ( that.val('ctr.end_date') > '' && that.val('ctr.expired') < 1 ) {
        that.show(['ctr.automatic_prolongation', 'ctr.follow_up_days']);
    } else {
        that.set({'ctr.automatic_prolongation': 0,
                  'ctr.follow_up_days': ''})
            .hide(['ctr.automatic_prolongation', 'ctr.follow_up_days']);
    }
    if (that.val('ctr.end_date') > '' && that.val('ctr.automatic_prolongation') == 1) {
        that.show(['ctr.prolongation_months', 'ctr.last_day_month']);
    } else {
        that.set({'ctr.prolongation_months': 0, 'ctr.last_day_month': 0})
            .hide(['ctr.prolongation_months', 'ctr.last_day_month']);
    }
    
    if ( that.val('ctr.end_date') > '' &&
         that.val('ctr.automatic_prolongation') > 0 &&
         that.val('ctr.prolongation_months')    > 0      ) {
        getAutomaticNextCtrEndDate(that, callback);
        return true; //callback will be done asynchronosly
    } else {
        return false; //callback won't be done asynchronosly
    }    
}
function getCtrExpirationReminderDate(that, callback) {    
    $.ajax({
        type: "POST",
        url: 'actions.php?action=ctrExpirationReminderDate',
        data: { endDate:            that.val('ctr.end_date'),
                followUpDays:       that.val('ctr.follow_up_days')
        },
        dataType: "json",
        success: function (data) {
            that.field("ctr.follow_up_days").message(data.message);
            callback({});
        }
    });
}

PaulVickery

Thank you very much indeed @rf1234 . This has been a great help and will update once I get it working

PaulVickery

Hi @rf1234, Thank you very much, all working perfectly.