How do I submit fields that are not shown when the data is submitted?

dougm

People talk about setting the type to hidden and I have tried that with no luck.
I do not have a test case and the pages are not public. I am hopeful someone can see what I am missing.
When data is submitted all that the server gets in the amount field.

Thanks

function loadTable(theEditor, tableName, type){
    var errorField = tableName+"Error";
    theEditor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                url: "${pageContext.servletContext.contextPath}/copdata/save.do?dairyPlanId=${dairyPlanDetailsForm.id}&entryType="+type
            }
        },
        table: tableName,
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        },
        fields: [{name:"amount"}, {name:"methodName", type:"hidden"}, {name:"paramType", type:"hidden"}]
    });
    $(tableName).on( 'click', 'tbody td:not(:first-child)', function (e) {
        $(errorField).text("");
        theEditor.inline( this, {
            submit: 'allIfChanged'
        });
    });
    theEditor.on('submitSuccess', function (e, json, data) {
        $(errorField).text(json.message);
        $(tableName).DataTable().ajax.reload();
    });
    $( 'input', theEditor.node() ).on( 'focus', function () {
          this.select();
    });
    table = $(tableName).DataTable( {
        dom: "Bfrtip",
        searching: false,
        paging: false,
        info: false,
        sort: false,
        ajax: "${pageContext.servletContext.contextPath}/copdata/entries.do?&dairyPlanId=${dairyPlanDetailsForm.id}&type="+type,
        columns: [
            { data: "description" , className:'dt-head-left' },
            { data: "methodName", className:'dt-head-left', type:"hidden" },
            { data: "paramType", className:'dt-head-right', type:"hidden" },
            { data: "amount", className:'dt-head-right dt-body-right dt-tfoot-right' }
        ],
        "columnDefs": [
            {
                "targets": [ 1 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            }
        ],
        order: [ 0, 'asc' ],
        keys: {
            columns: [ 3 ],
            keys: [ 9 ],
            editor: theEditor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [],
        "processing": true
    }); 
}

colin

One question, if you don't want it displayed, you can just omit it from the list in fields. Is there a reason why you want it declared there?

Colin

dougm

Hi Colin they are there because I thought I needed them there to be submitted back to the server on edit. Before I got the tab stuff to work the save would happen on the enter key and submit all the fields. Now that tabbing works and the save happens on the blur event only the 1 field is submitted.

Doug

dougm

When I remove

keys: {
            columns: [ 3 ],
            keys: [ 9 ],
            editor: theEditor,
            editOnFocus: true
        },

Tabbing doesn't work and the data is submitted on enter key and it posts all the fields to the server.

allan

If you are using KeyTable, then you need to set the form options using the formOptions.inline object - for example:

formOptions: {
  inline: {
    submit: 'allIfChanged'
  }
}

You can loose this block as well:

$(tableName).on( 'click', 'tbody td:not(:first-child)', ...

since KeyTable will do the inline call for you.

Allan

dougm

Thanks! This did the trick!

formOptions: {
            inline: {
                onBlur: 'submit',
                submit: 'allIfChanged'
           }
  }

dougm

Can I add a question to this thread? Any idea why sometimes when I tab into a field it isn't editable but surrounded by a blue box border? If I tab off the field and shift-tab back into it it is editable. It is editable if I click in it though.

Thoughts?

allan

Any idea why sometimes when I tab into a field it isn't editable but surrounded by a blue box border?

You have editOnFocus: true so it should be that the field will go into its "hard edit" (orange border) as soon as you tab or click into it: http://live.datatables.net/jorutoji/1/edit .

If that isn't happening, I'd need a link to a test case showing the issue please. It would also be worth checking that you are running the latest versions of all the DataTables and extensions code.

Allan