placing a process in between editor.inline and the submit on blur

mpcleverdon

Hi

I have a dilema on howto to do this little bit of code, I have a table with inline editing and works just fine. The client has asked me to add default values to other fields in the record/row depending on the choice made from a select.

So I created a function with dependent() in order to capture the change event as follows.

editor.dependent( 'prodn.excode', function (val, data, callback) {   //column with a select from a linked table
    if (typeof data.row !== 'undefined' && data.row !== null ) {     // Ignore first click
        var oldval = data.row.prodn['excode'];                             // get old value
        var rowid = data.row.DT_RowId; 
        if ( val != oldval ) {                                                           // process only if value has changed       
            $.post('inc/php/get/get_excode_defaults.php',{excode: val}, function(exc) { // ajax call for default values
                var ex=JSON.parse(exc);         
                editor.edit( rowid, false )
                    .set('prodn.horas', ex.horas)
                    .set('prodn.pax', ex.pax)
                    .submit();              
            }); 
        }
    }
} , 'change' );/**/

This works almost completely, The problem is that the submit never happens because the submitOnBlur from the inline seems to override it.

could I use initSubmit() instead of the dependent() ? or am I missing the point entirely?

I would much appreciate your comments

allan

hi,

Inline editing doesn't really lean itself to the editing of multiple fields - it is possible via the API, but when you start involving async code, it can get really messy very quickly. The only way to do it currently is to listen for preSubmit - if the Ajax process hasn't completed (you'd need a "flag" to indicate that) then cancel the submit, until it has completed.

The alternative, and what I would probably suggest, is to implement this at the server-side. Check the data being submitted - if the condition matches, then set the value of the other field.

Longer term, I'm going to add the ability to return a Promise from the dependent() method which will effectively stall everything else Editor is doing until that Promise is fulfilled.

Allan

mpcleverdon

For anyone interested in modifying other fields in the row when using inline editing

I have managed to do it by adapting the standard inline as follows

// Inline editing on click
table.on( 'click', 'tbody td:nth-child(n+3)', function (e) {           
  if (this._DT_CellIndex.column==5) { // Customize just column 5 in my case
    editor.inline( this, {
      submit: 'allIfChanged',
      onBlur: function(e) {
      var val=e.get('prodn.excode');
      $.post('inc/php/get/get_excode_defaults.php',{excode: val}, function(exc) {
                                setvals(JSON.parse(exc)); });
      function setvals(ex) {
        e.set('prodn.horas',ex[0]['horas']);
        e.set('prodn.paxadult',ex[0]['paxadult']);
        e.set('prodn.pax',ex[0]['pax']);
        e.set('prodn.paxchild',ex[0]['paxchild']);
        e.set('prodn.langs',ex[0]['langs']);
        editor.submit();
     }
    }
  } );     
} else { // Standard inline editing
  editor.inline( this, {
    onBlur: 'submit'
    } );       
  }    
} );/**/

As you say it is messy but it is working albeit with no failiure checks on the ajax call.

It may be usefull to someone.

Thanks very much for your response.

allan

Thanks for sharing that with us!

Allan