Inline editing issue when multiple type of select columns

bazo

Hi, while there are 2 type of select columns in datatables editor, when I change one of them both are being submitted. For example, I have "sex" and "race" columns; when I change "sex" and submit, "race" being set as 1st option either. Or vice versa; when I change "race", "sex" being set as 1st option. Whereas I expect only one field to be submit at a time. My code is as bellow. What am I doing wrong?

Thanks in advance for the help.

editor = new $.fn.dataTable.Editor({
   ajax: {
            url: "/lab/edit_patient_async",
            type: "POST",
            headers: {'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value },
            success: function () {
                dt.draw();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                swal("Error updating!", "Please try again!", "error");
            }
          },
          table: ".table",
          fields: [ {
                 label: "Source:",
                 name: "source"
             }, {
                 label: "Sex:",
                 name: "sex",
                 type: "select",
                 options: [
                   {"label": "male","value": "m"},
                   {"label": "female","value": "f"},
                 ],
             }, {
                 label: "Race:",
                 name: "race",
                 type: "select",
                 options: [
                   {"label": "White","value": "1"},
                   {"label": "Black","value": "2"},
                   {"label": "Hawaiian","value": "3"},
                 ],
             }
         ],
         formOptions: {
            inline: {
              onBlur: 'submit'
            }
         }       
});
      
 $('.table').on( 'click', 'tbody td:not(:first-child):not(:last-child)', function (e) {
        editor.inline( dt.cell( this ).index(), {
            onBlur: 'submit'
        });
      });
$('.table').on( 'key-focus', function ( e, datatable, cell ) {
           editor.inline( cell.index() );
      });

allan

That will happen if the value from the options list does not match the value of the data point for the field (including type - which might be the issue with the Race field).

I don't see how you are populating your DataTable above, so perhaps you could run the debugger and upload a trace and send me the six character unique code for the upload?

Or a link to a page showing the issue would work too

Allan

bazo

Thanks for your interest, Allan. I tried the debugger but couldn't get the unique code. I am sharing the link directly: 3.86.92.70:9006/lab/

colin

I see you're using Editor in your example, but our accounts aren't showing that you have a license - it just reports that your trial expired back in September. Is the license registered to another email address? Please can let us know so we can update our records and provide support.

Thanks,

Colin

bazo

Hi Colin, I am a freelance developer. We have licence but it does not belong to me. Best regards.

allan

{
    "1": {
        "pat_id": "patient01",
        "source": "test11",
        "sex": "Male",
        "race": "White",
        "date_added": "2022-12-27T07:58:52.328557Z",
        "num_blocks": 1,
        "DT_RowId": 19
    }
}

This what your data looks like for each row. However, the sex field is defined with:

                   {"label": "male","value": "m"},
                   {"label": "female","value": "f"},

and race with:

                   {"label": "White","value": "1"},
                   {"label": "Black","value": "2"},
                   {"label": "Hawaiian","value": "3"},

So you can see that the sex and race values do not match the option values. That's the problem here.

Typically what you would do in this sort of case is have race which is the id and edited in Editor and race_label which is shown in the DataTable - have both in the data object for the table and you'd be able to use both.

Alternatively, use just the value (m/f, 1/2/3) and have a rendering function that looks up and translates it into the label.

Allan

bazo

I sent race and race_label separately from server-side then rendered by race_label the column on the client-side. Thanks.