Multiple Editor Instances

th3t1ck

I have three buttons and depending on which one is clicked a different editor form is presented. The three buttons are a Database Schedule, a Database backup which occurs immediately and a Database Restore from backup. Do I need to create three different editor instances? What would that look like?

allan

Yes it sounds like three different Editor instances would be suitable in this case:

var editor1 = new $.fn.dataTable.Editor( { ... } );
var editor2 = new $.fn.dataTable.Editor( { ... } );
var editor3 = new $.fn.dataTable.Editor( { ... } );

Allan

th3t1ck

Excellent! Thank you Allan for the examples.

th3t1ck

So below is my code for three editor instances and custom buttons on the forms...

<script>
//var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    var schedule = new $.fn.dataTable.Editor( {
        ajax: 'schedule_database_backup-db.php',
        type: 'POST',
        data: $_POST,
        template: '#customForm',
        fields: [ {
                label: 'Period:',
                name:  'oesa_users.user_email',
                type:  'radio',
                options: [ 'Hourly', 'Daily', 'Weekly', 'Monthly' ],
            }, {
                label: 'Hour:',
                name:  'oesa_users.1',
                type: 'select',
                options: [ '0000', '0010', '0020', '0030', '0040', '0050', '0060', '0070', '0080', '0090', '0010', '0011', '0012', '0013', '0014', '0015', '0016', '0017', '0018', '0019', '0020', '0021', '0022', '0023' ],
            }, {
                label: 'Email Admin On Backup:',
                name:  'oesa_users.2',
                type: 'radio',
                options: [ 'Yes', 'No' ],
            }, {
                label: 'Number of backups to keep:',
                name:  'oesa_users.3',
                type: 'select',
                options: [ 'Keep 5 Backups', 'Keep 10 Backups', 'Keep 15 Backups', 'Keep 20 Backups' ],
            }
        ]

    } );
    
    $('#schedule').on( 'click', function () {
        schedule
            .buttons( {
                label: \"Save Schedule\",
                fn: function () { this.submit(); }
            })
            .edit();
    } );
} );

$(document).ready(function() {
    var backup = new $.fn.dataTable.Editor( {
        ajax: 'backup-db.php',
        type: 'POST',
        data: $_POST,
        template: '#customForm',
        fields: [ {
                label: 'Period:',
                name:  'oesa_users.20',
                type:  'text',
            }
        ]

    } );
        $('#backup').on( 'click', function () {
        backup
            .buttons( {
                label: \"Backup Database Now\",
                fn: function () { this.submit(); }
            })
            .edit();
    } );
} );

$(document).ready(function() {
    var restore = new $.fn.dataTable.Editor( {
        ajax: 'restore-db.php',
        type: 'POST',
        data: $_POST,
        template: '#customForm',
        fields: [ {
                label: 'Period:',
                name:  'oesa_users.user_email',
                type:  'select',
                options: [ 'backup1', 'backup2', 'backup3', 'backup4', 'backup5' ],
            }
        ]

    } );
            $('#restore').on( 'click', function () {
        restore
            .buttons( {
                label: \"Restore Database Now\",
                fn: function () { this.submit(); }
            })
            .edit();
    } );
} );
</script>

I still have more work to do. The field names are just place holders. I thought this might help someone else though.

allan

Thanks very much for posting that - looks great!

You probably don't need to break it up into three different document ready functions, but equally it won't do any harm.

Allan

th3t1ck

I followed your suggestion and I now have the three under one "(document).ready(function()".