Possible bug with programmatic Editor submit

Possible bug with programmatic Editor submit

cj1005cj1005 Posts: 143Questions: 46Answers: 1

Hi,

I have a DataTable that contains multiple columns, two of these columns (column 15 & 16) are tick boxes, and can be directly edited (using inline editing), when I click either of these tickboxes, the updated data for that row is submitted by the editor and the row is refreshed, but one of the other columns (column 3) is returned as empty (when it was not previously), the only difference I can see is that column 3 uses a Sele2 when editing.

Important - Please note the below issue only happens on the first attempt after page loading, subsequent changes work as expected.

It is also worth noting, this only happens when I click the tick boxes in columns 15 & 16, if I edit any other column it works correctly, also if I use the edit screen and manually edit and submit the data it also works correctly.

One more thing, I looked at the Ajax submitted data after ticking one of the tick boxes, and the data for column 3 is blank?!

The code below is run when the 'on change' occurs for column 15 (same for column 16 but related to the relevant fields):

$('#dtqsjob').on( 'change', 'input.editor-active-qsjob-bold', function () {
   qsjob_editor
      .edit( $(this).closest('tr'), false )
      .set( 'qsjob.bold', $(this).prop( 'checked' ) ? 1 : 0 )
      .submit();
} );

If you need to see this issue on my web app, then please pm me and I will share my web app login details?

Thanks, Chris

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    Hi Chris,

    Is the Select2 input using Ajax? If so, that might be the issue - you'd have to wait for the Ajax to complete. As an experiment you could try a setTimeout before the submit is called - say 2000mS?

    Allan

  • cj1005cj1005 Posts: 143Questions: 46Answers: 1

    Hi Alan,

    Yes, the Sele2 does use Ajax.

    I changed my code as below, but this the issue still occured:

    $('#dtqsjob').on( 'change', 'input.editor-active-qsjob-bold', function () {
        qsjob_editor.edit( $(this).closest('tr'), true )
        qsjob_editor.set( 'qsjob.bold', $(this).prop( 'checked' ) ? 1 : 0 )
        setTimeout(qsjob_editor.submit(), 2000)
    } );
    

    At least I know what the issue is now, so I'm going to try a few ideas to see if I can program a fix for this, but if you have any other suggestions, please let me know?

    Thanks, Chris

  • cj1005cj1005 Posts: 143Questions: 46Answers: 1

    Hi Alan,

    I've found a way around the issue, by doing the following:

    $('#dtqsjob').on( 'change', 'input.editor-active-qsjob-bold', function () {
           qsjob_editor
                .edit( $(this).closest('tr'), false )
                .set( 'qsjob.bold', $(this).prop( 'checked' ) ? 1 : 0 )
                .add({ label: 'booleanX', name: 'booleanX'}, 1)
                .submit()
                .clear( 'booleanX' );
    } );
    

    Then, in the backend, I detect if the field 'booleanX' exists and if so, ignore the update of any other field types.

    Thanks for your help.

    Chris

Sign In or Register to comment.