Parent Child Issues with init_edit

ChopShop

Here is the code that I am using:

    var query_editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  '/data?data_type=query&link=bundle',
            },
            edit: {
                type: 'PUT',
                url:  '/data/{id}?data_type=query&link=bundle',
            },
            remove: {
                type: 'DELETE',
                url:  '/data/{id}'
            }
        },
        table: '#querytable',
        fields: [
            {
                "label": "Label:",
                "name": "query.query"
            },
            {
                "label": "Sql:",
                "name": "query.sql"
            },
            {
                "label": "Status:",
                "name": "query.status",
                "type": "radio",
                "options": [
                  { label: "Active", value: "Active" },
                  { label: "InActive",  value: 'InActive' }
                ]               
            },
            {
                label: 'Bundle:',
                name: 'query.bundleid',
                type: 'select',
                placeholder: "Select a Bundle"
            }
        ]
    } );    
    
    var bundle_editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  '/data?data_type=bundle&child=query',
            },
            edit: {
                type: 'PUT',
                url:  '/data/{id}?data_type=bundle&child=query',
            },
            remove: {
                type: 'DELETE',
                url:  '/data/{id}'
            }
        },
        table: '#bundlemaintable',
        editor: 'query_editor',
        fields: [
            {
                "label": "Label:",
                "name": "bundle"
            },
            {
                label: 'Frequency:',
                name: 'frequency',
                "type": "select",
                "options": [
                  { label: "Hourly", value: "hour" },
                  { label: "Daily",  value: 'day' },
                  { label: "Monthly",  value: 'month' },
                  { label: "Yearly",  value: 'year' },
                ]               
            },{
                label: 'Status:',
                name: 'status',
                "type": "radio",
                "options": [
                  { label: "Active", value: "Active" },
                  { label: "InActive",  value: 'InActive' }
                ]               
            },
                        {
                label: 'Querys:',
                name: 'query.bundleid',
                type: 'datatable',
                editor: query_editor,
                sumbit: false,
                // optionsPair: {
                    // value: 'bundle.DT_RowId',
                    // label: 'bundle.bundle',
                // },
                config: {
                    ajax: {
                        type: 'post',
                        url:  '/data?data_type=query&link=bundle',
                        data: function (d) {
                            if (bundleTable) {
                                var selected = bundleTable.row({ selected: true });
                                console.log('id: '+selected)
                                if (selected.any()) {
                                    d.bundle = selected.data().id;
                                    
                                }
                            }
                        },
                    },
                    buttons: [
                        { extend: 'create', editor: query_editor },
                        { extend: 'edit', editor: query_editor },
                        { extend: 'remove', editor: query_editor },
                    ],
                    columns: [
                        {
                            data: 'query.query',
                            title: 'Query Name',
                        },
                        {
                            data: 'query.sql',
                            title: 'Sql',
                        },
                        {
                            data: 'query.status',
                            title: 'Status',
                        },
                    ],
                },
            },
        ]
    } );        

    var bundle_table = $('#bundlemaintable').DataTable({
        dom: 'Bfrtip',
        ajax: '/data?data_type=bundle&child=query',
        columns: [
            { data: 'bundle' },
            { data: 'frequency' },
            { data: 'status' },
            { data: 'query', render: function ( data ) {
                return data.length;
                } ,
            }
        ],
        select: {
            style: 'single',
        },
        buttons: [
            { extend: 'create', editor: bundle_editor },
            { extend: 'editSingle', editor: bundle_editor },
            { extend: 'remove', editor: bundle_editor },
            'reload',
            'export'
        ],
    });

    bundle_editor.on('init_edit', function () {
        // Unhide in case of being hidden by create
        console.log('Called Init')
        bundle_editor.field('query.bundleid').show();
 
        // Get query for the selected bundle
        bundle_editor
            .field('query.bundleid')
            .dt()
            .ajax.reload(function (json) {
                // Update the options for the sub-editor. This will be automatic
                // in future versions of _editor
                query_editor.field('query.bundleid').update(json.options['query.bundleid']);
            });
 
        // Set the default for the "new" user bundle field
        query_editor
            .field('query.bundleid')
            .def(bundleTable.row({ selected: true }).data().id);
    });
 
    // Disable the ability to create a new user on a new bundle
    bundle_editor.on('initCreate', function () {
        bundle_editor.field('query.bundleid').hide();
    }); 

I added a console.log statement to the init_edit function to see if it is doing anything.
I is never called. If I hit NEW then the query.bundleid field is hidden. So I know it is firing.
When I hit EDIT after hitting NEW then it is still hidden. I need to refresh the page for it to work.

I copied from https://editor.datatables.net/examples/datatables/parentChild.html
and just refactored for my application.

tangerine

The example you're working from has this:

    siteEditor.on('initEdit', function () {

allan

Yup - @tangerine is spot on as usual. initEdit is the event name, not init_edit.

The full list of events Editor can fire is available here.

Allan

ChopShop

Thanks everyone for helping me through this.
I have a working site now thanks to help that all of you have given.