Inline Editing Submit onChange instead of onBlur

greggreggreg

I have my table nice and happy. Only certain fields are editable inline, they are editable with a drop down select list.

If I edit a field and click off the datatable (or click a non-editable filed) all is ok.
But if I click off a select editable field straight onto another editable select field, then I get this error in the console:

TypeError: g is undefined

To fix it, I thought I could change the line below:
editor.inline( this, { onChange: 'submit' } );

To this:
editor.inline( this, { onChange: 'submit' } );

But it didnt work. Any ideas or alternative thoughts?

rf1234

As far as I know onBlur doesn't really work with select fields. If I recall it correctly this is a browser problem. @allan commented on that previously somewhere.

Just use:

editor.inline( this )

Means: you have to hit enter to save the selected value

rf1234

I think my previous answer was wrong.
Take a look at this thread please:
https://datatables.net/forums/discussion/48583/inline-editing-hitting-enter-to-submit#latest

colin

I'm not seeing that here. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

greggreggreg

Colin, does your example work for you and actually change on screen?

I tried in FF and Chrome and its not working:
https://imgur.com/JNdRu1Y

colin

Sorry, you are right - I was too busy looking for the console error to notice that. I'm not sure why that's not working, I'll look into it and report back.

Colin

allan

onBlur: 'submit' is the option you want. That comes from the form-options object that can be passed to inline() as the second argument - see this example.

If you want to submit without a blur and do it on change immediately, you need to add a listener for that and also take account of the fact that when Editor sets the value (when the field is displayed) it will trigger a change event. That can be done by checking if a data object with editor is passed into the event handler - e.g.:

  editor.field('office').input().on('change', function(e, data) {
     if (!data || !data.editor) {
       editor.submit();
     }
  });

Live example here: http://live.datatables.net/lusazuhu/5/edit .

Allan

colin

Ah yep, my example was working, you just needed to press return for the select value to be submitted. Apologies for the confusion.

greggreggreg

Thanks Allan, I have been on leave and just getting back to this. Should this work with server side? This is not saving.

HTML - https://pastebin.com/7vQVASd1
ServerSide - https://pastebin.com/zXZtuiER

(sorry for the pastebins, but the editor kept killing my formatting.

greggreggreg

ignore the above, my bad, I missed the ajax line.

greggreggreg

Hi Allan, I think I have found a bug in the code.

In your code above
if (!data || !data.editor) {

editor, if its named anything other than editor it will not work. I presume it is meant to be the same as the editor variable. Which naming it editor is ok if there is only 1 on the page, but when there are multi this no longer works I assume?

colin

Welcome back, hope you had a good break!

I presume it is meant to be the same as the editor variable.

No, data.editor means the data has an Editor instance associated with it.

When you say multi, do you mean multiple Editor instances? Is that for different tables?

Colin

greggreggreg

yeah, multiple different tables.

Perfect, thank you.

GrittyNation

Hello,

After implementing this solution for inline editing with a select box on change, I am having an issue where the same behavior is occurring with the default editing modal box (highlighting a cell row or rows, and clicking the "Edit" button) which I am trying to avoid.

In other words, the inline on change updates are working great, but when editing from the modal window I would like the user to have to click "Update" after the change is made (rather than auto update on select option change).

Might this be possible?

The code in question is as follows:

// Activate an inline edit on click of a table cell
$('#expenseTable').on( 'click', 'tbody td.editable', function (e) {

      editor.inline( this );
      
      editor.field('exp_sub.sub_id').input().on('change', function(e, data) {
         if (!data || !data.editor) {
            editor.submit();
         }
      });

} );

As soon as a class="editable" cell is clicked, those onchange updates will carry over into the modal edit window. The logical solution in my head would be to unbind that click event when the "Edit" button is clicked so that onchange submit doesn't get triggered, however adding a function to the Edit button seems to prevent the modal from working at all.

Thanks for any help!
Taylor

colin

You can use display() to determine if you're in the form, and if so, carry on as normal - see the updated example here.

Colin

GrittyNation

That's exactly what I was looking for. Thank you, Colin!