`dependent()` change event triggered on editor `open`

drewturk

Hi so,
I have a situation in which I have a field that I want to watch. I am using dependent() on a field that if changed by user will disable another field. This is working but not as expected. When the editor is opened the change event is triggered and the other field is disabled. But what I expect it to happen is that the field will disable only when the user interacts with the field in question, such as selecting on option or changing text.

This is what I have:

var editor = new $.fn.dataTable.Editor({
        ajax: {
            url: '/client/contracts/editor'
        },
        table: '#car',
        idSrc: 'id',
        i18n: {
            create: {
                title: 'Create New Car Contract'
            }
        },
        fields: [
            {
                name: 'client.id',
                type: 'hidden',
                data: function (data) {
                    return data.client.id;
                },
                def: $('#clientId').val()
            },
            {
                label: 'Preferred',
                name: 'favorite',
                type: 'switch'
            },
            {
                label: 'Divisional Use',
                name: 'ignored',
                type: 'switch',
                data: function (data) {
                    // semantic inverse
                    return data.ignored === 'false';
                },
                def: true

            },
            {
                label: 'Name',
                name: 'vendor',
                type: 'autocomplete',
                acRender: function (data) {
                    return data.name
                },
                acOpts: {
                    search: ['carvendor']
                }
            },
            {
                label: 'Corporate Discount  ',
                name: 'accountNumber'
            },
            {
                label: 'Billing ID',
                name: 'billingId'
            },
            {
                label: 'Use Billing ID as Corporate Discount',
                name: 'billingIsCorpDiscount',
                type: 'switch'

            },
            {
                label: 'Notes',
                name: 'notes',
                type: 'textarea'
            },
            {
                label: 'Contract',
                name: 'fileLocation',
                type: 'upload',
                display: function (id) {
                    var filename = new Url(id).query.file; // existing files will be full path files
                    if (filename === undefined) { // new files just be filename, full path built in ContractsController
                        filename = dataTable.files().files ? dataTable.file( 'files', id ).filename : id;
                    }
                    return '<div style="word-break: break-all"><i class="fa fa-page"></i> ' + filename +'</div>';
                }
            },
            {
                label: 'Insurance Included',
                name: 'insuranceIncluded',
                type: 'switch'

            },
            {
                label: 'Override use of this contract',
                name: 'override',
                type: 'switch'

            },
            {
                label: 'Supplemental Instructions',
                name: 'supplementalInstructions'
            },
            {
                label: 'Help desk ticket',
                name: 'createTicket',
                type: 'switch',
                def: function () {
                    return editor.mode() === 'create';
                }
            }
        ]
    }).dependent(["billingId", "accountNumber"], function() {
        console.log('change');
        editor.set('createTicket', true).disable('createTicket');
    });

NOTE:

url:
http://andrew.cbtat.com/client/contracts/car
on far right there are inline 'actions' where you can choose to edit or delete row.

I hope this makes sense.

allan

Hi,

The dependent() method needs to trigger a change when the form is opened (more specifically, it is doing when the field value it set) so that the form can reflect the state that should be set based on the current value.

Consider for example a form which has country and city select fields. When you trigger editing, the country value is set, and the list of options for the city needs to be updated to match that country.

There is currently no option to disable that. If you want it only based on user interaction you'd need to attach a change event listener to the input (field().input()) when the e-event open event is triggered and then remove it on close.

Allan

drewturk

That is great thanks! but the change event is still triggered on open.
is there by any change a postOpen event or some other solution that might be helpful?

drewturk

I had to use a flag to keep track if open was first triggered, then I could use the change event as normal.

allan

I fear that's the only way to workaround this at the moment if you need to ignore that initial change event.

Good to hear you found a solution and thanks for posting back.

Allan