Adding Editor to the Datatable JS Bin so I can test for a possible bug

Adding Editor to the Datatable JS Bin so I can test for a possible bug

minifiredragonminifiredragon Posts: 82Questions: 16Answers: 2

I am trying to setup a live datatable:

https://live.datatables.net/raxoqeto/3/

So I can recreate an issue I am having on my datatable.

That issue being when I change 1 cell, datatables sometimes sends 2 or more cells to the server. I use this bit for editing:

editor initialization:
exampleEditor = new $j.fn.dataTable.Editor(
{
ajax:
{  
   url: 'updateURL', //this is not the real url
      data: function(d)
      {
         return JSON.stringify( d );
      },
      reload:
      {
         callBack: null,
         resetPaging: false
      }
},
formOptions: 
{
   bubble: 
   {
      title: true,
      onBackground: false,
      submit: 'changed'
   }
},

}

assign the editor to the TD:

$j('#example').on( 'click', 'tbody td:not(.readonly)', function (e)
{
      exampleEditor.inline( this, { submit: 'changed'} );
});

I do have live downloads going on in the background being downloaded from the server and added to the table, but it was my understanding that this should only fire on the cell that I have just changed (Since I am not using the allIfChanged option). And on top of this, the data being sent is empty;

{"data":{"row_15299":{"notes":"test","cost":""}},"action":"edit"}

The notes field is the edited field. The cost is the extra field, but has no data even though in the table, it does. I would say an easy fix would be to check for empty data and ignore it (which I am doing now), but what happens when I want to clear my note?

Another note on the subject is, this seems to only occur where I have set defaultContent on the cell.

Answers

  • allanallan Posts: 63,266Questions: 1Answers: 10,424 Site admin

    Here is a basic Editor example.

    Editor will submit all fields which have changed value, so there is something that has changed between the original data for the row and the data that is read from the form. The information above isn't complete (I don't see the read in data, or the fields for Editor), but the two most common reasons for this are:

    • null data in the original data source. HTML input elements can't hold a null value, they must be strings, and since null !== '' that can result in what you are seeing.
    • When using select if a value is not in the list of options, the top option from the options will be used, thus will be different from the original data.

    Do either of them track?

    Allan

  • minifiredragonminifiredragon Posts: 82Questions: 16Answers: 2

    Neither of them track. I am only using a text field. And as I had said, the data entered is sent (even if the field is "blank" aka, the data erased from the field. But occasionally a few other fields are sent at the same time (which cannot be from the user, since once you press enter, it is sent and there is no way to get to another field).

    Here is what is going on with the table always checking with for updated information:

    var table = $j('#example').DataTable();
        //this adds new rows if there are any to add
            for(var i=0; i<d.data.length; i++)
            {
                let rw = table.row((idx, data) => data.sku === d.data[i].sku);
                if( rw.data() )
                {
                   var rd = table.row('#'+rw.data().DT_RowId).data();
                   $j.extend(rd,d.data[i]);
                   table.row('#'+rw.data().DT_RowId).data(rd).invalidate();
    
                   var node = table.row('#'+rw.data().DT_RowId).node();
                    $j(node).effect( "highlight", {color:"#99ff99"}, 3000 );
                }
                else
                {
                    table.row.add(d.data[i]).draw(false);
                }
            }
    //this adds in the new data if there is any.
            for(var i=0; i<d.liveData.length; i++)
            {
                let rw = table.row((idx, data) => data.sku === d.liveData[i].sku);
                if( rw.data() )
                {
                    var rd = table.row('#'+rw.data().DT_RowId).data();
                    $j.extend(rd,d.liveData[i])
                    table.row('#'+rw.data().DT_RowId).data(rd).invalidate();
                }
                else
                {
                    //if it is not found, don't add blank data;
                    //table.row.add(d.liveData[i]).draw(false);
                }
            }
    

    If the person is editing the table when an update occurs, it kicks them out of the edit and they have to start the edit again, so there technically should be no changed data when the edit begins.

  • minifiredragonminifiredragon Posts: 82Questions: 16Answers: 2
    edited September 14

    Forgot this:

    (I don't see the read in data, or the fields for Editor)

    I left out the below part because it was standard for getting the fields to work, and nothing special was in it. The table is generated by an array of structs of available columns. The language is coldfusion, it checks if the field is an editable field, and if it is, let it be editable.

    table: '#example',
                        fields: [
                            <cfloop from="1" to="#ArrayLen(tColAr)#" index="j">
                                <cfloop from="1" to="#ArrayLen(dt.tableColumns)#" index="k">
                                    <cfif tColAr[j] EQ dt.tableColumns[k].colDataName>
                                        <cfif dt.tableColumns[k].editable NEQ 0 AND dt.tableColumns[k].dataLocation NEQ 'settings' >
                                            { label: '#dt.tableColumns[k].colTableName#:', name: '#dt.tableColumns[k].colDataName#' },
                                        </cfif>
                                    </cfif>
                                </cfloop>
                            </cfloop>
                        ]
    
  • allanallan Posts: 63,266Questions: 1Answers: 10,424 Site admin

    Could you try adding this to your code:

      editor.on('preSubmit', function (e, data, action) {
        let rowData = table.row( editor.ids(true) ).data();
        
        console.log('Original rowData: ' + JSON.stringify(rowData));
        console.log('Modified data: ' + JSON.stringify(data));
      });
    

    Live example.

    And then give the the output when the error happens? It will dump the original data, and also the modified data that gets submitted.

    Thanks,
    Allan

  • minifiredragonminifiredragon Posts: 82Questions: 16Answers: 2

    Sorry it has taken so long. The problem is random and I have not got it to occur again yet. I will keep an eye out for it to occur and post the data. I also have updated the datatables since I have had the issue. I do not know which version I was using, but it was 2.0, but not 2.1.

    When I have someone really working away on the table I will remove the safety check. At that point it gives an error on the editor when it occurs and they can notify me when that happens, and I can grab the information we are looking for.

  • allanallan Posts: 63,266Questions: 1Answers: 10,424 Site admin

    No worries - let me know if you find anything.

    Allan

Sign In or Register to comment.