Radio button not submitting on change

globalplane

Link to test case: https://comprehensibleinputwiki.com/ciwlibrary/testcase2.php
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I have three fields. Two selects and one radio. The selects work with the 'change' event listener and fire the submit(), but the radio field does not. And nothing is written to the console. If I change the type to select, it works fine and submits on change.

                editor = new $.fn.dataTable.Editor( {
                    ajax: "newvidadmin.php",
                    table: "#library-table",
            formOptions: {
                    main: {
                        submit: 'changed'
                }
            },
                    fields: [ {
                        type:  "select",
                        label: "Difficulty:",
                        name:  "difficulty_id"
                    }, {
                        type: "select",
                        label: "Language:",
                        name: "language_id",
                    }, {
                        type: "radio",
                        label: "Status:",
                        name: "enabled_id"
                    }
                    ]
                });

                editor.field('difficulty_id').input().on('change', function(e, d) {
                    if (!d) {
                        editor.submit();
                    }
                }); 
                editor.field('language_id').input().on('change', function(e, d) {
                    if (!d) {
                        editor.submit();
                    }
                }); 
                editor.field('enabled_id').input().on('change', function(e, d) {
                    console.log(e);
                    console.log(d);
                    if (!d) {
                        editor.submit();
                    }
                }); 
                
                // Initialize table
                let table = new DataTable('#library-table', {
                    dom: 'Plfrtip',
                    serverSide: true,
                    ajax: {
                        url: "newvidadmin.php",
                        type: "POST"
                    },
                    deferRender: true,
                    "columns": [
                        { "data": "vid" },

                        { "data": "title" },

                        { "data": "channelTitle" },

                        { "data": "difficulty" ,
                          "class": "difficulty editable" ,
                          "editField": "difficulty_id" },

                        { "data": "language_name" ,
                          "class": "language editable" ,
                          "editField": "language_id" },

                        { "data": "enabled" ,
                          "class": "enabled editable",
                          "editField": "enabled_id" },

                    ],
                    searchPanes: {
                        cascadePanes: true,
                        viewTotal: true,
                        i18n: {
                            count: '{total}',
                            countFiltered: '{count} / {total}'
                        },
            
                    },
                });

allan

What is happening is that:

    editor.field('enabled_id').input()

at the point it is run is not finding any input elements has the form hasn't yet loaded the options for that field - i.e. they don't exist yet. That isn't the case with the regular text input elements, since they don't depend on the Ajax loaded data.

What to do instead is use a delegated event - e.g.:

    $(editor.field('enabled_id').node()).on('change', 'input', function (e, d) {
        console.log(e);
        console.log(d);
        if (!d) {
            editor.submit();
        }
    });

Allan

globalplane

Perfect, works, thanks!