Editing a field removes the row

Editing a field removes the row

JoshuaHJoshuaH Posts: 6Questions: 1Answers: 2
edited February 2016 in Free community support

First off, love the tool and will be buying an Editor license once my boss approves it :D

I've been using DataTables for a while now but just started playing with the Editor. I want to build my own custom controller so that I can more easily do the validation, however I'm running into the problem where whenever I edit a field, the row disappears after submitting the change. My debug bookmark: http://debug.datatables.net/udupur

Javascript on page:

function activateTable2(){
    if(aTable2 == 0){
        aTable2 = 1;
        
        editor = new $.fn.DataTable.Editor( {
            ajax: 'localhost/data/editVisitMissing',
            table: '#visitMissing',
            fields: [ {
                    label: 'Site Number:',
                    name: 'siteNumber'
                },{
                    label: 'Patient Code:',
                    name: 'patientCode'
                }, {
                    label: 'Visit:',
                    name: 'visitName'
                }, {
                    label: 'Visit Date:',
                    name: 'visitDate'
                }, {
                    label: 'Patient Status:',
                    name: 'patientStatus'
                }, {
                    label: 'Paid:',
                    name: 'paid'
                }
            ]
        } );
        
        $('#visitMissing').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, {
                submit: 'allIfChanged'
            } );
        } );
        
        $('#visitMissing').DataTable({
          'paging': true,
          'dom': '<"col-sm-6"l><"col-sm-6"f><"col-sm-12"p>rtp',
          'order': [[1,'asc']],
          'lengthChange': true,
          'iDisplayLength': 50,
          'lengthMenu': [[25,50,100,-1], [25,50,100,'All']],
          'searching': true,
          'ordering': true,
          'info': false,
          'responsive': true,
          'scrollX': false,
          'autoWidth': true,
          'ajax': {
              'url': 'localhost/data/generateVisitMissing',
              'data': {
                  'studyID': 1,
                  'dataRepoSessionID': 12
              }
          },
          'columns': [
                { data: 'siteNumber' },
                { data: 'patientCode' },
                { data: 'visitName' },
                { data: 'visitDate' },
                { data: 'patientStatus' },
                { data: 'paid' }
            ]
        });
    }
}

Basic table setup:

<table id='visitMissing' class='table table-striped table-bordered hover dataTable' cellspacing='0' role='grid' width='100%'>
    <thead><tr><th>Site Number</th><th>Patient Code</th><th>Visit</th><th>Visit Date</th><th>Patient Status</th><th>Paid</th></tr></thead>
    <tbody><tbody>
</table>

And for testing purposes, I'm just doing a simple return in the php file:

print json_encode(array("data"=>array("DT_RowId"=>"row_11", "siteNumber"=>"1", "patientCode"=>"001-002", "visitName"=>"test", "visitDate"=>date('Y-m-d'), "patientStatus"=>"gogo", "paid"=>"paid1")));
exit();

I can see the form data posted correctly:

action:edit
data[row_11][siteNumber]:1
data[row_11][patientCode]:001-0021
data[row_11][visitName]:-
data[row_11][visitDate]:2013-05-21
data[row_11][patientStatus]:Screen Fail
data[row_11][paid]:<span class='text-red'>No</span>

And I can see the data coming back:

{
    "data": {
        "DT_RowId": "row_11",
        "siteNumber": "1",
        "patientCode": "001-002",
        "visitName": "test",
        "visitDate": "2016-02-05",
        "patientStatus": "gogo",
        "paid": "paid1"
    }
}

The table generates initially without any issue. But when editing a row, instead of showing the new row, it gets removes instead.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,201Questions: 1Answers: 10,414 Site admin
    Answer ✓

    The return from the server isn't quiet right - the data object should actually be an array of objects:

    {
        "data": [{
            "DT_RowId": "row_11",
            "siteNumber": "1",
            "patientCode": "001-002",
            "visitName": "test",
            "visitDate": "2016-02-05",
            "patientStatus": "gogo",
            "paid": "paid1"
        }]
    }
    

    It needs to be an array since Editor can edit multiple rows at a time.

    Allan

  • JoshuaHJoshuaH Posts: 6Questions: 1Answers: 2

    Arrgghhh, of course it was something like that. That's what I get for using quick, made up on the spot data. Thanks Allan!

This discussion has been closed.