Don't display an Editor field, if data is null.

andy_barber

Hi all. I have an internal website, using Editor. When I click an "Edit" button, I would like for one of the fields to not appear on the Editor form, if the data is null. I have tried multiple code variations with the "render" option and have had no luck. I have also messed with the dependent fields option. Example code snippet is below. I would like Field 4 to not display at all, on the form, if tablename.columnname4 is null, for the given record. Some file, table, and field names have been changed, to protect the innocent. Help!

var editor = new $.fn.dataTable.Editor( {
ajax: "somefile.php",
table: "table.table",
fields: [
{
"label": "Field1:",
"name": "tablename.columnname1",
"type": "readonly"
},
{
"label": "Field2:",
"name": "tablename.columnname2"
},
{
"label": "Field3:",
"name": "tablename.columnname3"
},
{
"label": "Field4",
"name": "tablename.columnname4",
"type": "ckeditor",
'className': 'full block'
},
{
"label": "Field5:",
"name": "tablename.columnname5"
}
]
} );

kthorngren

As you mentioned dependent() is how to show/hide fields based on a condition. See the third example in the docs.

Possibly something like this?

editor.dependent( 'tablename.columnname4', function ( val, data, callback, e ) {
    return val === '' ?
        { hide: 'tablename.columnname4' } :
        { show: 'tablename.columnname4' };
} );

You may need to debug the if statement to see if val is an empty string or null or something else if null. Here is a simple example:
https://live.datatables.net/guwafemu/440/edit

Cedric Kelly has an empty position field which is hidden when editing that row.

Kevin

andy_barber

@kthorngren, I tried almost this exact piece of code earlier with no errors, but also with no change in behavior. I suspect there is something to what you mentioned about debugging val for something other than empty or null. Thank you. I'll start digging.

andy_barber

@kthorngren, any tips on that debugging val? I can't seem to get console.log to display anything.

kthorngren

Something like this for console output:
https://live.datatables.net/guwafemu/442/edit

Or put a debugger breakpoint on the return statement.

Kevin

allan

@andy_barber Of you could post your code, I can take a look.

Allan

andy_barber

@allan

    editor.dependent( 'tbl_validation_form.list_steps', function ( val, data, callback, e ) {
        console.log('val: "' + val + '"');
        return val === null ?
            { hide: ['tbl_validation_form.list_steps'] } :
            { show: ['tbl_validation_form.list_steps'] };
    } );

andy_barber

Basically, if there are no validation steps entered, I don't want that field to show up at all.

kthorngren

What does the console.log statement show when there are no validation steps? Paste the output here.

Kevin

andy_barber

On a whim, I replaced tbl_validation_form.list_steps with tbl_validation_form.id, another valid field. All of a sudden, val starts showing up in the console.log. That said, I would have expected the tbl_validation_form.id to not be there, and it was. I feel like there are two separate issues going on here: 1) something that is preventing the dependent field code from working and 2) something with the tbl_validation_form.list_steps field, specifically, that causes nothing to display in the log, despite the console.log code being correct.

andy_barber

Console.log output when tbl_validation_form.id is used in the dependent field code:

[Violation] 'setTimeout' handler took 145ms
jquery-3.7.0.min.js:2 [Violation] 'load' handler took 2244ms
drts-validation-form.js:210 val: "233"
dataTables.editor.js:4958 [Violation] 'setTimeout' handler took 268ms
dataTables.editor.js:4958 [Violation] 'setTimeout' handler took 249ms
[Violation] Forced reflow while executing JavaScript took 68ms
9[Violation] Avoid using document.write().
ckeditor.js:260 [Violation] 'setTimeout' handler took 442ms
[Violation] Forced reflow while executing JavaScript took 82ms

andy_barber

Console.log output when tbl_validation_form.list_steps is used in the dependent field code:

5[Violation] 'setTimeout' handler took <N>ms
jquery-3.7.0.min.js:2 [Violation] 'load' handler took 2402ms
[Violation] Forced reflow while executing JavaScript took 68ms
9[Violation] Avoid using document.write().
[Violation] Forced reflow while executing JavaScript took 68ms

The console.log code is unchanged in each example.
console.log('val: "' + val + '"');

andy_barber

@kthorngren & @allen, I believe it is the MySQL field type that is preventing the console.log message from appearing. That doesn't appear to be the reason the dependent field code isn't working, though.

When I choose a "varchar" type field, like tbl_validation_form.id, it displays in the console.log. When I choose a "mediumtext" type field, like tbl_validation_form.list_steps, it doesn't display.

kthorngren

Do all those other messages appear at the same time? If so it seems there is something else that might be wrong. Do they appear if you remove the console.log statement?

I would set a browser debugger breakpoint on the return statement. This will allow you to see the val value and the values of the other variables within the scope. Post a screenshot of what you see.

Kevin

andy_barber

@kthorngren, I had things set for "verbose." I have now turned it off. When I turn it off, those messages go away from the console. They seem to have more to do with settings I have chosen, like turning off paging and things like that. I'll try to figure out how to set a break point. Full disclosure, I am not a full-time developer. I have to learn much of this on the fly.

kthorngren

If the console.log outputs with tbl_validation_form.id but not tbl_validation_form.list_steps then that suggests tbl_validation_form.list_steps does not match the field.name you have defined so the event handler is not executing. Make sure it matches and the character case is correct. Post your Editor code without renaming the fields.

Each browser has different steps but if using Chrome go to View > Developer Tools. In the tools select Sources then open your file. Find the return statement and click on the line number to the left. This is the break point. Edit a row and browser will stop when it hits that statement, like this:

Kevin

andy_barber

Full page code:

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
var app_id2 = getUrlVars()["app_id"];
//console.log("app_id2", app_id2);

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {

    const siteEditor = new DataTable.Editor({
        ajax: "../sites/all/libraries/_drts_php/validation_form_proc_steps.php?app_id3="+app_id2+"",
        dom: 'Btr',
        fields: [
            {
                label: 'Step Number:',
                name: 'tbl_plan_procedure_step.ff__step_number__c',
                type: 'readonly'
            },
            {
                label: 'Step Name:',
                name: 'tbl_plan_procedure_step.name',
                type: 'readonly',
                className: 'full block'
            },
            {
                label: "Validation Steps - Description:",
                name: "tbl_plan_procedure_step.ff__description__c",
                type: "ckeditor",           
                className: 'full block',
                opts: {readOnly: true}              
            },
            {
                label: "Validation Steps - Additional Information:",
                name: "tbl_plan_procedure_step.ff__additional_information__c",
                type: "ckeditor",           
                className: 'full block',
                opts: {readOnly: true}              
            }
        ]
    });

    var editor = new $.fn.dataTable.Editor( {
        ajax: "../sites/all/libraries/_drts_php/validation_form.php?app_id3="+app_id2+"",
        table: "table.table",
        fields: [ 
            {
                "label": "Application Name:",
                "name": "tbl_applications.name",
                "type": "readonly"
            },
            {
                "label": "Form ID:",
                "name": "tbl_validation_form.id"
            },
            {
                "label": "Form Name:",
                "name": "tbl_validation_form.form_name"
            },
            {
                "label": "Tester Name:",
                "name": "tbl_validation_form.fk_id_contact",
                "type": "select",
                "placeholder": "Choose a name",
                "placeholderValue": "Choose a name",
                "optionsPair": [
                    { label: 'tbl_contacts.name', value: 'tbl_contacts.id' }
                ]
            },
            {
                label: 'Validation Steps (Fusion - current listing):',
                name: 'tbl_validation_form.fk_id_application',
                type: 'datatable',
                className: 'full block',                                
                editor: siteEditor,
                optionsPair: {
                    value: 'tbl_applications.id'
                },
                config: {
                    ajax: {
                        url: "../sites/all/libraries/_drts_php/validation_form_proc_steps.php?app_id3="+app_id2+""
                    },
                    dom: 'Btr',
                    autoWidth: false,
                    buttons: [
//                      { extend: 'create', editor: siteEditor },
                        { extend: 'edit', className: 'btn-success', text: 'For full step information, <b>click on the step number below</b>, <i>then</i> <b>click on this green button</b>.</br> (Step information is read-only, changes to these steps must be made in Fusion.)', editor: siteEditor }//,
//                      { extend: 'remove', editor: siteEditor }
                    ],
                    columns: [
                        {
                            title: 'Step Number:',
                            data: 'tbl_plan_procedure_step.ff__step_number__c'
                        },
                        {
                            title: 'Step Name:',
                            data: 'tbl_plan_procedure_step.name'
                        }
                    ],
                    columnDefs: [
                        { width: 100, targets: 0 }
                    ],
                    order: [[ 0, "asc" ]],
                    language: {
                        emptyTable: "Please enter your validation steps in Fusion."
                    }
                }
            },
            {
                "label": "Validation Steps (DRTS - need to be copied into Fusion by 2/1/2024):",
                "name": "tbl_validation_form.list_steps",
                "type": "ckeditor",                         
                'className': 'full block'
            },
            {
                "label": "Expected Results:",
                "name": "tbl_validation_form.exp_results",
                "type": "ckeditor",                         
                'className': 'full block'                               
            },
            {
                "label": "Actual Results:",
                "name": "tbl_validation_form.act_results",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Were any problems encountered?",
                "name": "tbl_validation_form.probs_yn",
                "type": "select",               
                "options": [
                    { label: "No", value: "No" },
                    { label: "Yes",  value: "Yes" }
                ],
                "def": "No"
            },
            {
                "label": "List problem encountered.",
                "name": "tbl_validation_form.probs_list",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "List resolution to problems encountered.",
                "name": "tbl_validation_form.probs_res",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Successes other than validation:",
                "name": "tbl_validation_form.success_other",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Suggestions for future exercises, if any:",
                "name": "tbl_validation_form.suggest",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Other employees that participated in this validation:",
                "name": "tbl_validation_form.other_emp",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Additional software loaded for this validation:",
                "name": "tbl_validation_form.software",
                "type": "ckeditor",             
                'className': 'full block'                               
            },
            {
                "label": "Objectives met?",
                "name": "tbl_validation_form.obj_met",
                "type": "select",               
                "placeholder": "Did you achieve your intended objectives?",
                "placeholderValue": "Did you achieve your intended objectives?",
                "options": [
                    { label: "No",      value: "No" },
                    { label: "Yes",     value: "Yes" }
                ]
            },
            {
                "label": "Time Completed:",
                "name": "tbl_validation_form.time_comp",
                "type": "datetime",
                "def": function () { return new Date(); },
                "format": "YYYY-MM-DD HH:mm:ss"
            }
        ]
    } );
    
    editor.dependent( 'tbl_validation_form.probs_yn', function ( val ) {
        return val === 'No' ?
            { hide: ['tbl_validation_form.probs_list', 'tbl_validation_form.probs_res'] } :
            { show: ['tbl_validation_form.probs_list', 'tbl_validation_form.probs_res'] };
    } );    

    editor.dependent( 'tbl_validation_form.list_steps', function ( val, data, callback, e ) {
        console.log('val: "' + val + '"');
        return val === '' ?
            { hide: ['tbl_validation_form.list_steps'] } :
            { show: ['tbl_validation_form.list_steps'] };
    } );

    var table = $('table.table').DataTable( {
        dom: 'Bftipr',
        ajax: {
            url: "../sites/all/libraries/_drts_php/validation_form.php?app_id3="+app_id2+"",
            type: "POST"
        },
        processing: true,
        serverSide: true,
        columns: [
            { "data": "tbl_validation_form.id" },
            { "data": "tbl_validation_form.last_modified" },
            { "data": "tbl_applications.name" },
            { "data": "tbl_contacts.name" },
            { "data": "tbl_validation_form.form_name" }
        ],
        columnDefs: [
            { width: 20, targets: 0 },
            { width: 125, targets: 1 },
            { width: 350, targets: 2 },
            { width: 350, targets: 4 }//,
        ],
        select: true,
        paging: false,
        buttons: [
            // { extend: "create", editor: editor },
            // { extend: "edit",   editor: editor },
            {
                extend: "edit",
                className: 'btn-success', 
                editor: editor,
                formButtons: [
                    'Submit',
                    { text: 'Cancel', action: function () { this.close(); } }
                ]
            }
            // { extend: "remove", editor: editor }
        ],
        order: [[ 1, "asc" ]]
    } );

    $("div.instbar").html('<b>To edit your validation form, click the line of the appropriate form, then click the "Edit" button.</b>');
    
} );

andy_barber

@kthorngren, if I set a breakpoint on line 203, the debugger pauses appropriately. If I set one on line 210, the debugger does not pause.

kthorngren

Interesting. I'm not sure why but it seems dependent() doesn't fire for ckeditor fields. @allan can confirm why this is the case. As a workaround you can use the tbl_validation_form.id then use the data parameter to check the value of tbl_validation_form.list_steps. Something like this:

    editor.dependent( 'tbl_validation_form.id', function ( val, data, callback, e ) {
        console.log('val: "' + val + '"');
        return data.rows[0].tbl_validation_form.list_steps === '' ?
            { hide: ['tbl_validation_form.list_steps'] } :
            { show: ['tbl_validation_form.list_steps'] };
    } );

See this example:
https://live.datatables.net/lulomejo/1/edit

Edit Bradley Greer. You will see the editor.dependent( 'office', function ( val, data, callback, e ) {...}); event doesn't fire as office is a ckeditor field. But the editor.dependent( 'name', function ( val, data, callback, e ) {..});) event does. It checks th office value with data.rows[0].office.

Kevin

andy_barber

@kthorngren, this worked. Thank you so much! I'll check back for Allen's response.

allan

I wonder if CKEditor isn't triggering a change event, which is what dependent() listens for by default. I'll look into that.

Allan