Inline Editor Select

Inline Editor Select

amb85amb85 Posts: 3Questions: 1Answers: 0

When using inline editing with a select box can you submit onchange? Right now the user needs to hit enter to save the change.

/**
 * Defaults
 */
$.extend(true, $.fn.dataTable.defaults, {
    dom: "<'row'<'col-sm-6 text-left'B><'col-sm-6'fr>>tip",
    columns: [
        { data: 'readingOrder', render: function ( data, type, row ) {
                return '<a class="delete-row"><i color="#ff0000" class="fa fa-trash"></i></a>&nbsp&nbsp&nbsp<i color="#000000" class="fa fa-arrows-v"></i>';
            }
        },
        { data: "field_title", className: 'editable'},
        { data: "field_desc", className: 'editable' },
        { data: "field_type", className: 'editable', render: function (data, type, row) {
                if ( selects[data] == null ){
                    return '';
                } else {
                    return selects[data];
                }
            } 
        },
        { data: "field_options", className: 'editable' },
    ],
    columnDefs: [
        {orderable: false, targets: [ 0,1,2,3,4 ] },
    ],
});
/**
 * Employee Table
 */
var employeeEditor = new $.fn.dataTable.Editor( {
    ajax:  datatablesVars.ajaxUrl + '&form=employee',
    table: '#employeeCoTable',
    display: 'envelope',
    fields: [ {
            label: "Title",
            name: "field_title"
        }, {
            label: "Description",
            name: "field_desc"
        }, {
            label: "Type",
            name: "field_type",
            type: "select",
            options : [{
                    label: "Text Box", value: 'text'
                },{
                    label: "Text Area", value: 'textarea'
                },{
                    label: "Radio", value: 'radio'
                },{
                    label: "Check Box", value: 'checkbox'
            }]
        }, {
            label: "Options",
            name: "field_options"
        }, 
    ]
});
var employeeTable = $('#employeeCoTable').DataTable( {
    ajax: datatablesVars.ajaxUrl + '&form=employee',
    rowReorder: {
        dataSrc: 'readingOrder',
        editor:  employeeEditor
    },
    buttons: [
        {
            text: 'New',
            action: function ( e, dt, node, config ) {
                employeeEditor.inlineCreate('end');
                newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
                $('#DTE_Field_readingOrder').val(newRow);
            }
        },
    ],
});
$('#employeeCoTable').on( 'click', 'tbody td.editable', function () {
    employeeEditor.inline( this );
});
$('#employeeCoTable tbody').on( 'click', 'a.delete-row', function () {
    rowId = this.closest("tr").id;
    employeeEditor.remove( '#' + rowId , false )
    .submit();
});
employeeEditor.add( {
    type:    "hidden",
    name:    "form",
    default: "employee"
});
employeeEditor.on( 'preSubmit', function ( e, data, action ) {
    $.each( data.data, function ( key, values ) {
        newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
        data.data[ key ][ 'readingOrder' ] = newRow;
    });
});

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Yes, add a change event to it (while also looking for the data property Editor sets - e.g.:

    employeeEditor.field('field_type').input().on('change', function(e, d) {
      if (!d) {
        employeeEditor.submit();
      }
    });
    

    You need to check for that second parameter, because it will be set when Editor makes the change itself (i.e. when you activate the edit), but not when the user selects a value.

    Allan

  • amb85amb85 Posts: 3Questions: 1Answers: 0

    Ah, that works perfectly! Thank you.

  • amb85amb85 Posts: 3Questions: 1Answers: 0

    Actually, I am still having an issue with this. It works great for text fields but on the select menus, it doesn't. When you click the select field it changes to a select menu as expected. When you click again to make a selection from the list it saves it before letting you make a selection. The only way I can make it work is to arrow up and down. Any thoughts on how I can restrict to text fields only?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    That should actually work for select fields as well. If you go to this example and pop open the browser's console, paste in:

    editor.field('users.site').input().on('change', function(e, d) {
      if (!d) {
        editor.submit();
      }
    }); 
    

    then click on the last column in the table, you'll see that it submits the select element on change.

    That suggests to me that there might be something else going on on your page. Are you able to give me a link to it please?

    If you want to restrict it to specific fields only, you need to only call it for the specific field() elements that you want.

    Allan

Sign In or Register to comment.