Radio button not submitting on change

Radio button not submitting on change

globalplaneglobalplane Posts: 70Questions: 12Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    Answer ✓

    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

  • globalplaneglobalplane Posts: 70Questions: 12Answers: 0

    Perfect, works, thanks!

Sign In or Register to comment.