showing inputs after button press

ChrisKolli

Hello,
I'm trying to hide some inputs in my editor by default and then have them visible after a button is pressed.
I got the button into my editor thanks to this thread
but now the button does not call any functions or at least i don't know how to

This is my editor:

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.wochenplan.php',
        table: '#wochenplan',
        fields: [
            {
                "label": "Departure:",
                "name": "wochenplan.dep_1"
            },
            {
                "label": "ETD 1:",
                "name": "wochenplan.etd_1"
            },
            {
                "label": "ATD 1:",
                "name": "wochenplan.atd_1"
            },
            {
                "label": "ETA 1:",
                "name": "wochenplan.eta_1"
            },
            {
                "label": "ATA 1:",
                "name": "wochenplan.ata_1"
            },
            {
                "label": "Destination 1:",
                "name": "wochenplan.dest_1"
            },
            {
                "label": "ETD 2:",
                "name": "wochenplan.etd_2"
            },
            {
                "label": "ATD 2:",
                "name": "wochenplan.atd_2"
            },
            {
                "label": "ETA 2:",
                "name": "wochenplan.eta_2"
            },
            {
                "label": "ATA 2:",
                "name": "wochenplan.ata_2"
            },
            {
                "label": "Destination 2:",
                "name": "wochenplan.dest_2"
            },
            {
                "label": "ETD 3:",
                "name": "wochenplan.etd_3"
            },
            {
                "label": "ATD 3:",
                "name": "wochenplan.atd_3"
            },
            {
                "label": "ETA 3:",
                "name": "wochenplan.eta_3"
            },
            {
                "label": "ATA 3:",
                "name": "wochenplan.ata_3"
            },

And i want most of them hidden by default so i did this:

editor.on('initCreate', function() {
        editor.hide('wochenplan.atd_1');
        editor.hide('wochenplan.ata_1');
        editor.hide('wochenplan.etd_2');
        editor.hide('wochenplan.atd_2');
        editor.hide('wochenplan.eta_2');
        editor.hide('wochenplan.ata_2');
        editor.hide('wochenplan.dest_2');
        editor.hide('wochenplan.etd_3');
        editor.hide('wochenplan.atd_3');
        editor.hide('wochenplan.eta_3');
        editor.hide('wochenplan.ata_3');
        editor.hide('wochenplan.dest_3');
        editor.hide('wochenplan.ate');
    });

which works perfectly.

i then add a button:

$( '<button id="moreDest" type="button">More Destinations</button>' ).insertAfter(
        editor.field( 'wochenplan.dest_1' ).input()
    );

which shows up as expected but my function somehow does not work:

$("#moreDest").on("click", function () {
        editor.show( 'wochenplan.dest_2' );
        editor.show('wochenplan.eta_2');
        editor.show('wochenplan.dest_2');
        editor.show('wochenplan.etd_3');
        editor.show('wochenplan.eta_3');
        editor.show('wochenplan.dest_3');
    } );

even though this works: (I use this to show all cells while editing but not during create)

editor.on('initEdit', function() {
        editor.show(); //Shows all fields
    });

colin

I think the missing bit from the thread you posted to was the call to one() when putting the button onto the form. I've simplified the code, it only prints a console message, but this should get you going: http://live.datatables.net/cironudo/1/edit

Colin

ChrisKolli

Thank you so much, that was the part i didnt know.
I thought you could just call the function without putting it in the "editor.one" part

ChrisKolli

Here is my code fully working for everyone interested:

editor.on('open', function(e , mode, action){
        if (mode == 'main'){
            $( '<button id="moreDest" type="button">More Destinations</button>' ).insertAfter(
                editor.field( 'wochenplan.dest_1' ).input()
            );
            if(action == 'create'){
                $("#moreDest").on("click", function () {
                    editor.show('wochenplan.etd_2');
                    editor.show('wochenplan.eta_2');
                    editor.show('wochenplan.dest_2');
                    editor.show('wochenplan.etd_3');
                    editor.show('wochenplan.eta_3');
                    editor.show('wochenplan.dest_3');
                } );
            }else if(action == 'edit'){
                $("#moreDest").on("click", function () {
                    editor.show('wochenplan.etd_2');
                    editor.show('wochenplan.atd_2');
                    editor.show('wochenplan.eta_2');
                    editor.show('wochenplan.ata_2');
                    editor.show('wochenplan.dest_2');
                    editor.show('wochenplan.etd_3');
                    editor.show('wochenplan.atd_3');
                    editor.show('wochenplan.eta_3');
                    editor.show('wochenplan.ata_3');
                    editor.show('wochenplan.dest_3');
                } );
            };
            editor.on( 'close', function () {
                $( '#moreDest' ).remove();
            } );
        }
    });