Inline Editing Submit onChange instead of onBlur

Inline Editing Submit onChange instead of onBlur

greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

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?

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

    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.

  • greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

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

  • greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited March 2020 Answer ✓

    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

  • greggreggreggreggreggreg Posts: 42Questions: 19Answers: 2

    yeah, multiple different tables.

    Perfect, thank you.

  • GrittyNationGrittyNation Posts: 2Questions: 0Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • GrittyNationGrittyNation Posts: 2Questions: 0Answers: 0

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

This discussion has been closed.