DataTable Editor onBlur: 'submit' odd behavior

DataTable Editor onBlur: 'submit' odd behavior

bbrindzabbrindza Posts: 299Questions: 68Answers: 1

I have 12 inline editable columns in my table. When I change the value in the first column and tab to next the column, the value in the first column is submitted and changed as expected.

However the in column two where the focus is, I change the value and tab to next the column, but the value is not changed.

Once I go back to the second column and try it again,it works. Any ides of why this could be happening?

 editor = new $.fn.dataTable.Editor( {
         ajax: {
                 type: 'POST',
                 url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                 data: { locationCode:locationCode,  
                         salespersonNumber: salespersonNumber,
                         customerNumber: customerNumber,
                         productNumber: productNumber
                  },
              },
             table: '#budgetRows_' + id,
             fields: [
                  {
                     label: 'January Budget:',
                     name:  'BD$01'
                 }, {
                     label: 'February Budget:',
                     name:  'BD$02'
                 }, {
                     label: 'March Budget:',
                     name:  'BD$03'
                 }, {
                     label: 'April Budget:',
                     name:  'BD$04'
                 }, {
                     label: 'May Budget:',
                     name:  'BD$05'
                 }, {
                     label: 'June Budget:',
                     name:  'BD$06'
                 }, {
                     label: 'July Budget:',
                     name:  'BD$07'
                 }, {
                     label: 'August Budget:',
                     name:  'BD$08'
                 }, {
                     label: 'September Budget:',
                     name:  'BD$09'
                 }, {
                     label: 'October Budget:',
                     name:  'BD$10'
                 }, {
                     label: 'November Budget:',
                     name:  'BD$11'
                 }, {
                     label: 'December Budget:',
                     name:  'BD$12'
                 }
             ]
         } );
  
         // Activate an inline edit on click of a table cell

           $('#budgetRows_' + id).on('click', 'tbody td:not(:first-child):not(\'.markCompleteButton\')', 

          function (e) {
        
             editor.inline( childTable3.cell( this ).index(), {
                 onBlur: 'submit',
                 submit: 'allIfChanged'
             });
          });
  
  
          childTable3 = $('#budgetRows_' + id).DataTable({
              
             dom: 't',
             ajax: {
                    type: 'POST',
                    url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                    data: { locationCode:locationCode, 
                            salespersonNumber: salespersonNumber,
                            customerNumber: customerNumber,
                            productNumber: productNumber
                        },
                },
             serverSide: true,
             order: [ 1, 'asc' ],
             keys: {
                    columns: ':not(:first-child, .markCompleteButton)',
                    keys: [ 9 ],
                    editor: editor,
                    editOnFocus: true
             },
             columns: [
                         {
                             data: null,
                             searchable: false,
                             orderable: false,
                             render: function ( data, type, row ) {
                                  return '<td><b>Next Year Budget</b></td>';
                               }
                          },  
                         { data: 'BD$01'},
                         { data: 'BD$02'},
                         { data: 'BD$03'},
                         { data: 'BD$04'},
                         { data: 'BD$05'},
                         { data: 'BD$06'},
                         { data: 'BD$07'},
                         { data: 'BD$08'},
                         { data: 'BD$09'},
                         { data: 'BD$10'},
                         { data: 'BD$11'},
                         { data: 'BD$12'},

                             // ** Mark Completed Button
                            {
                             data: null,
                             searchable: false,
                             orderable: false,
                             className: 'markCompleteButton',
                             render: function ( data, type, full, meta ) {
                                 
                                  if( full.SYNCFL == 'N'){ 
                                        return '<button id="markBudgetRecordCompletedButon" class="btn btn-primary btn-xs" onclick="showMarkBudgetRecordCompletedModal(\''+ full.PKLOC +'\', \''+ full.PKSLNO +'\', \''+ full.PKCUST +'\', \''+ full.PKPROD +'\' )">Mark Completed</button>';
                                  }else{
                                         return '';
                                  }
                              }
                          },  
             ],                                                                                                              
       
             columnDefs: [ 
                            { targets: "_all" , className: "text-center" },
                            { targets: "_all" , width: 100 },
                            //{ targets: 13, className: "text-center" },
                            { targets: "_all", orderable: false}
                        ],
             
             select: {
                 style:    'os',
                 selector: 'td:first-child'
             },

         } );

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Are you able to give me a link to a page showing the issue? I'm not immediately recalling having encountered this issue before I'm afraid. Editor stores the values of the row when editing starts, so it can check to see if a value has changed. It sounds like I'd need to debug that part of the code in your application environment as it seems to be working correctly in the examples.

    Allan

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    Hi Allan,

    Unfortunately the page is behind a firewall. I can do some debugging on my end if you can provide my with the steps in the ssp class I can use to see what the issue may be.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    The first thing would be to see the data being submitted and also the data being returned from the server please? The browser's Network Inspector will show that information as the request and response.

    Allan

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1
    edited May 2023

    Hi Allan,

    The DB2 table columns are formatted as Numeric 7,1 and contains the data 0.0, because the Default Value is defined as 0.

    When the page load it brings in the budget rows, which display the data as .0

    ** Data when first loaded from ssp

    {
        "data": [{
            "DT_RowId": "row_SOUb10a429e5b10a429e2562b10a429eS11379",
            "PKLOC": "SOU",
            "PKSLNO": "5",
            "PKCUST": "2562",
            "PKPROD": "S11379",
            "SYNCFL": "N",
            "BD$01": ".0",
            "BD$02": ".0",
            "BD$03": ".0",
            "BD$04": ".0",
            "BD$05": ".0",
            "BD$06": ".0",
            "BD$07": ".0",
            "BD$08": ".0",
            "BD$09": ".0",
            "BD$10": ".0",
            "BD$11": ".0",
            "BD$12": ".0"
        }],
        "options": [],
        "files": [],
        "draw": 1,
        "recordsTotal": 1,
        "recordsFiltered": 1,
        "debugSql": []
    }
    

    It works on the 1st column when I change the inline value...

    ** Data sent from inline value change (3.6)

    {
        "data": [{
            "DT_RowId": "row_SOUb10a429e5b10a429e2562b10a429eS11379",
            "PKLOC": "SOU",
            "PKSLNO": "5",
            "PKCUST": "2562",
            "PKPROD": "S11379",
            "SYNCFL": "N",
            "BD$01": "3.6",
            "BD$02": ".0",
            "BD$03": ".0",
            "BD$04": ".0",
            "BD$05": ".0",
            "BD$06": ".0",
            "BD$07": ".0",
            "BD$08": ".0",
            "BD$09": ".0",
            "BD$10": ".0",
            "BD$11": ".0",
            "BD$12": ".0"
        }],
        "debugSql": []
    }
    

    ** Data return when key tab to 2nd column

    {
        "data": [{
            "DT_RowId": "row_SOUb10a429e5b10a429e2562b10a429eS11379",
            "PKLOC": "SOU",
            "PKSLNO": "5",
            "PKCUST": "2562",
            "PKPROD": "S11379",
            "SYNCFL": "N",
            "BD$01": "3.6",
            "BD$02": ".0",
            "BD$03": ".0",
            "BD$04": ".0",
            "BD$05": ".0",
            "BD$06": ".0",
            "BD$07": ".0",
            "BD$08": ".0",
            "BD$09": ".0",
            "BD$10": ".0",
            "BD$11": ".0",
            "BD$12": ".0"
        }],
        "debugSql": []
    }
    

    From the 2nd column I typed in 8.4 and key tabbed to 3rd column. The ssp_getSalepersonByCustomerBillTo_BudgetData_Template.php did not fire in the Chrome Network display. It appears that it is a front-end issues, seeing the ssp did not run.

    The DT_RowId looks odd as well. Based on my ssp it should be

    RowId":"row_SOU5256211379"
    

    not

    RowId":"row_SOUb10a429e5b10a429e2562b10a429eS11379"
    

    It is putting b10a429e between key values which is columns

    PKLOC":"SOU","PKSLNO":"5","PKCUST":"2562","PKPROD":"S11379"
    

    Thoughts?

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Hi,

    Thanks for this information.

    Data sent from inline value change (3.6)

    That actually looks like the response from the server, rather than what is sent - since it has debugSql in it, and is JSON rather than HTTP parameters (unless you are using ajax.data to send it as JSON?).

    It is putting b10a429e between key values which is columns

    Yes, this is correct and expected. Editor adds a hash to separate the primary key values. It does that to protect against the order of the primary keys changing - imagine for example you had a key made up of 1 and 2 as compound key values. If the dev changed the order in the script and the client didn't refresh, the wrong data would be updated!

    This is how Editor does that. It's server-side processing will automatically add that in.

    The ssp_getSalepersonByCustomerBillTo_BudgetData_Template.php did not fire in the Chrome Network display. It appears that it is a front-end issues, seeing the ssp did not run.

    Based on that, I'm afraid I would need to be able to debug the page. If it is a logic issue in how the data change is detected, it is going to be buried deep in the Editor code.

    Allan

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    What do you mean by "buried deep in the Editor code"? Are you referring to my script?
    or the actual dataTables.editor.min.js? My data is ajax sourced not in the HTML. I could try to put together live.datatables.net example and see if I get the same result if I embed that data in the HTML. Other then that I would need you to access the application through a secured connection some how.

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    Here is the solution..

    I removed this from my script

      $('#budgetRows_' + id).on('click', 'tbody td:not(:first- 
         child):not(\'.markCompleteButton\')', 
    
              function (e) {
                 editor.inline( childTable3.cell( this ).index(), {
                      onBlur: 'submit',
                      submit: 'allIfChanged'
                  });
               });
    

    This code was conflicting with this code...

     keys: {
                 columns: ':not(:first-child, .markCompleteButton)',
                 keys: [ 9 ],
                 editor: editor,
                  editOnFocus: true
                 },
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Thanks for the update! Good to talk to you earlier.

    Allan

Sign In or Register to comment.