problem with data submit in inline edit

xyyl619 · April 2016

hello, i've got a problem as follows:

I use edit datatables in inline mode, when i click the editing field and it open as an input for me to edit,

then i fill the content ,but i don't click the background to make it blur and submit(here i don't use editor to submit the data,when submit ,it just fill in the table), instead, i click another button, which get the data from the tables and submit to the server, then i
find that the data got from the table doesn't include the data i just edited.

the reason i find out is that the click event happen first,and then the editor blur event.

then i have tried to call editor.blur() to make it blur first in the click event of the submit button, however ,it throws the error like this:

  Uncaught TypeError: Cannot read property 'onBlur' of undefined
  Editor._blur @ dataTables.editor.js?ust=v2016022900:4155
  Editor.blur @ dataTables.editor.js?bust=v2016022900:1754

the code throw errors is here:

 */
Editor.prototype._blur = function ()
{
    var opts = this.s.editOpts;

    if ( this._event( 'preBlur' ) === false ) {
        return;
    }

    if ( opts.onBlur === 'submit' ) {
        this.submit();
    }
    else if ( opts.onBlur === 'close' ) {
        this._close();
    }
};
//this.s.editOpts is undefined

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · April 2016

Can you show me the code for how you are constructing editor and assigning the event handlers please?

Thanks,
Allan

xyyl619 · April 2016

//editor init
function Project_initFeeEditor() {
  feeEditor = new $.fn.dataTable.Editor({
    ajax: function (method, url, data, sccess, error) {
      var item = data.data;
      if ($.isPlainObject(item)) {
        var itemList = [];
        for (var obj in  item) {
          itemList.push(item[obj]);
        }

        data.data = itemList;
      }
      sccess(data);
      return;
    },
    table: "#fee_table",
    fields: [
      {label: "id:", name: "id", def: "-1"},
      {label: "DT_RowId", name: "DT_RowId"},
      {label: "name:", name: "name"},
      {label: "direction:", name: "direction"},
      {label: "object:", name: "object"},
      {label: "value:", name: "value"},
      {label: "changeFlag:", name: "changeFlag"}
    ]
  });
 
  $('#fee_table').on('click', 'tbody td.editable', function (e) {
    feeEditor.inline(this, {submitOnBlur: true, onBlur: 'submit', submit: 'all'});
  });


  // 数据提交时，更新changeflag标示符
  feeEditor.on('setData', function (e, json, data, action) {
    data.changeFlag = 'changed';
    return;
  });
}

//belows is calling blur when click specific button
。。。
var settings = this.settings()[0];
    
    var editor = settings._editor;
    if (typeof editor !== 'undefined')
    {
      editor.blur();
    }
。。。

allan · April 2016

Thanks for the code.

The first thing I would suggest is never using anything from the settings object. The settings object is considered to be private - it can, will and does change between versions. editor() is the method you want to use to get the Editor instance for the table.

Could you remove submitOnBlur: true - that is redundant if you also use onBlur and I'm not actually sure what would happen if you use both!

Is the form actually in edit mode at the time when the button is triggered? If you could give me a link to the page that would greatly assist in my ability to debug the issue.

Thanks,
Allan

problem with data submit in inline edit

problem with data submit in inline edit

Answers

Howdy, Stranger!

Categories

DataTables

problem with data submit in inline edit

problem with data submit in inline edit

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables