showing inputs after button press

showing inputs after button press

ChrisKolliChrisKolli Posts: 8Questions: 3Answers: 0

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
    });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 11,280Questions: 0Answers: 1,927
    Answer ✓

    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

  • ChrisKolliChrisKolli Posts: 8Questions: 3Answers: 0

    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

  • ChrisKolliChrisKolli Posts: 8Questions: 3Answers: 0

    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();
                } );
            }
        });
    
Sign In or Register to comment.