Inline Editor Select

amb85

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

allan

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

amb85

Ah, that works perfectly! Thank you.

amb85

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?

allan

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