Id not sent after select change with inline editor (submitOnBlur)

dzikus

Hi
I have configured following editor:

editor = new $.fn.dataTable.Editor( {

        ajax: "{%url "get_recipients" %}",
        table: "#recipients",
        idSrc: "id",
        display: "envelope",
        formOptions: {
            inline: {
                submitOnBlur: true
            }
        },
        fields: [ {
                label: "{%trans "Salutation"%}:",
                name: "recipient_salutation"
            }, 
            {
                label: "{%trans "Name"%}:",
                name: "recipient_name"
            }, {
                label: "{%trans "Address line:"%}",
                name: "address"
            }, {
                label: "{%trans "Street"%}:",
                name: "street"
            }, {
                label: "{%trans "Zip"%}:",
                name: "zip"
            }, {
                label: "{%trans "City"%}:",
                name: "city"
            }, {
                label: "{%trans "Country"%}:",
                name: "country_name",
                type: "select",
                ipOpts: [
                    {%for country in countries%}
                    { label: "{{country.name}}", value: "{{country.name}}"  },
                    {%endfor%}
                ]
            }
        ]
    } );

Example data package is:
{"city": "city", "street": "street", "zip": "zip", "recipient_salutation": "Salut", "address": "address", "country_name": "Spain", "id": 91, "recipient_name": "Name"}

The case is that when I use online editor with submitOnBlur: true when I edit text fields everything is ok.
When I edit select field the ajax post is sent but its lacking id (effectively causing error on server side).
The question is if I should create workaround on server side or there is a chance for a patch in near time?
Or maybe that is something i do wrong about initialization? Does select fields work somehow different?

Best Regards
Piotr

allan

That's interesting! I've just tried adding the following to this example:

    $('#example').on( 'click', 'tbody td', function (e) {
        editor.inline( this, 'users.site', {submitOnBlur: true} );
    } );

Clicking on the final column in the table shows the select and the id is submitted on blur.

Can you link me to a page showing the problem so I can debug it?

Allan

mpcleverdon

I have a similar problem but I have two fields that are not being posted to the server

I am following the instruction on your recent post https://datatables.net/blog/2014-09-09

But I ony need inline editing on two columns (checkboxes)

Code is ...

        $('#progress').on( 'change', 'tbody td:nth-child(4)', function (e) {
            editor
                .inline( this )
                .set( 'InProgress', $(this).prop( 'checked' ) ? 1 : 0 )
                .submit();      
            } );
        $('#progress').on( 'change', 'tbody td:nth-child(10)', function (e) {
            editor
                .inline( this )
                .set( 'Paid', $(this).prop( 'checked' ) ? 1 : 0 )
                .submit();      
            } );

... in the DataTable setup --

"fnRowCallback": function( nRow , aData , iDisplayIndex ) {
// Set the checked state of the checkbox in the table
$('input.editor-InProgress',nRow).prop( 'checked', aData['InProgress'] == 1 );  
$('input.editor-Paid',nRow).prop( 'checked', aData['Paid'] == 1 );  

-- Still using mData here --

{ // Column 4
  "mData": "InProgress",
  "mRender": function (data, type, row) {
    if ( type === 'display' ) {
      if (data == "1") {
        return '<input type=\"checkbox\" checked value="' + data + '" class="editor-InProgress">';
          } else {
        return '<input type=\"checkbox\" value="' + data + '" class="editor-InProgress">';
      }
      }
    return data;
    },
    className: "dt-body-center"
},
{ // Column 10
  "mData": "Paid",
  "mRender": function (data, type, row) {
    if ( type === 'display' ) {
      if (data == "1") {
        return '<input type=\"checkbox\" checked value="' + data + '" class="editor-Paid">';
      } else {
        return '<input type=\"checkbox\" value="' + data + '" class="editor-Paid">';
      }
    }
    return data;
  },
  className: "dt-body-center"
},

But the POST to the server misses out these two fields, although the json returns all of the fields and consequently changes the checkbox status.

Not sure what is happening.

Regards Mark

mpcleverdon

Ok so I have the solution

I was using the following syntax (Since I started using DataTables and Editor)

            {
                "label": "In Progress",
                "name": "InProgress",
                "type": "checkbox",
                "separator": "|",
                    "ipOpts":    [
                    { label: '', value: 1 }
                ]
            },

But I tried changing as in your more recent examples to

            {
                label: "In Progress",
                name: "InProgress",
                type: "checkbox",
                separator: "|",
                    ipOpts:    [
                    { label: '', value: 1 }
                ]
            },

And it started working, I still dont know when or why the syntax changed

I was also using in the DataTables config the "mData", "mRender" directives etc....

allan

Hi Mark,

Thanks for the update and good to hear you managed to resolve this.

However, I don't actually see a difference between your two code blocks in the code immediately preceding this post. Could you possibly let me know what the change is? If there is a backwards compatibility issue, it would be good to be able to resolve it.

Regards,
Allan