dependent() on select input not effective on new $.fn.dataTable.Editor modal

alogg

I am trying to use dependent() function in order to alter a select input value when a certain value is selected by the user.
This works great when in the main editor (when creating New row or when Editing existing row), however, there is no effect of my dependent() instance on an additional editor that I have created.

Here is the main editor's definition:

editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Show options:",
                name: "options",
                type: "select",
                options: [ "Simple", "All" ],
                def: "Simple"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }
        ]
    } );

Here my additional editor:

var statusEditor = new $.fn.dataTable.Editor( {
                ajax: "mysql_query.php",
                table: "#example",
                fields: [ 
                        {
                                label: "Comment:",
                                name: "comment"
                        }, {
                label: "Show options:",
                name: "options",
                type: "select",
                options: [ "Simple", "All" ],
                def: "Simple"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            } ],
            } );

Followed by the instance of table:

var table = $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor },
                                {
                                    sExtends: 'select_single',
                                    editor: editor,
                                    sButtonClass: 'marginLeft',
                                    sButtonText: 'Change status',
                                    fnClick: function () {
                                        if ( table.row( '.selected' ).length !== 0 ) {
                                            // Show the status submit form
                                            statusEditor
                                                .title( 'Edit status' )
                                                .buttons( { label: 'Change', fn: function() { this.submit(); } } )
                                                .edit( table.row( '.selected' ).node() );
                                        }
                                    }
                                },
            ]
        }
    } );

And finally, the dependent() function causing problems:

editor.dependent( 'options', function ( val ) {
        return val === 'Simple' ?
            { hide: ['position', 'office'] } :
            { show: ['position', 'office'] };
    } );

Problem: The dependent() function does work on the main editor modal dialogue (it shows and hide the 2 inputs ['position', 'office'], but does not work on the additional editor modal dialogue.
Any idea of what's going wrong here?
Thank you in advance for your support.
Alex

alogg

Got it, dependent() must be instantiated upon new editor called 'statusEditor'

statusEditor.dependent( 'options', function ( val ) {
        return val === 'Simple' ?
            { hide: ['position', 'office'] } :
            { show: ['position', 'office'] };
    } );

allan

This is correct - good to hear you found the solution. However, it is worth noting that dependent() is a class method and its actions are unique to the Editor instance that it is called on. It is not a class on its own - it cannot be "instantiated" itself nor is there such a thing as a dependent() instance.

Allan