Is it possible to dynamically enable/disable fields in Editor instance, based on existing fields?

pansengtat

Recently, I was being requested to make some changes to an existing instance of Editor.

The change would involve dynamically disabling or enabling one or more fields, based on the input of a DatePicker field.

Here is my existing code, written in Javascript, to show what was done thus far:

editor = new $.fn.dataTable.Editor( {
        ajax: "php/ActualHoursEditor.php",
        table: "#ActualHours",
        fields: [
            {
                label: "Actual Date: ",
                name: "Schedule.ActualDate",
                type: "date"
            }, {
                label: "Actual Man Hours (Normal): ",
                name: "Schedule.ManHrsNM"
            }, {
                label: "Actual Man Hours (OT - Wkday/Sat): ",
                name: "Schedule.ManHrsOT"
            }, {
                label: "Actual Man Hours (OT - Sun/PH): ",
                name: "Schedule.ManHrsOTSunPH"
            }
        ],
        i18n: {
            edit: {
                title:  "Actual Man Hours"
            }
        }
    } );

The idea is to enable Schedule.ManHrsNM if Schedule.ActualDate is set to a weekday, and disable Schedule.ManHrsNM if Schedule.ActualDate is set to a weekend. If there is existing code to make the change, how do I modify the Editor instance? If not, what existing plug-ins and extensions can I use that has a similar function?

allan

Sure, use the enable() and disable() methods. You'll need to listen for the value changes to operate those methods, which you can do with standard jQuery event listeners and the field().node() method to get the node container for the field in question.

Allan

pansengtat

I got a pretty rough idea of how to do it.
In JS, this is what I might add:

$( editor.field( 'Schedule.ActualDate' ).node() ).on(
    'change', function () {
        var actDate = editor.field( 'Schedule.ActualDate' ).val();  //convert to date
        var dt = new Date(actDate);                                 //get date's day
        var day = dt.getDay();
        if ( day == 6 ) {           //--- Saturday ---//
            editor.disable( 'Schedule.ManHrsNM' );
            editor.enable( 'Schedule.ManHrsOT' );
            editor.disable( 'Schedule.ManHrsOTSunPH' );
        }
        else if ( day == 0 ) {      //--- Sunday or Public Holiday ---//
            editor.disable( 'Schedule.ManHrsNM' );
            editor.disable( 'Schedule.ManHrsOT' );
            editor.enable( 'Schedule.ManHrsOTSunPH' );
        }
        else {                      //--- Weekdays ---//
            editor.enable( 'Schedule.ManHrsNM' );
            editor.enable( 'Schedule.ManHrsOT' );
            editor.disable( 'Schedule.ManHrsOTSunPH' );
        }
    }
);

A question remains, is that if it is possible to detect values and disable/enable upon loading the page. The field enabling/disabling seems to trigger only when there is use interaction in the Editor form after loading; when the DataTables is just loaded, clicking on a row and then Edit would still show all fields as enabled.

allan

A question remains, is that if it is possible to detect values and disable/enable upon loading the page.

I sure it would be, but would the values be upon page load. An edit won't have been triggered at that point will it?

Having said that, you've above code is wrapped in a change event. It would work anywhere that you have access to the editor variable.

Allan