Multiple Editor Instances

Multiple Editor Instances

th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Excellent! Thank you Allan for the examples.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

This discussion has been closed.