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

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

pansengtatpansengtat Posts: 66Questions: 26Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • pansengtatpansengtat Posts: 66Questions: 26Answers: 1

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

This discussion has been closed.