How would go about getting the edited value of a cell in a table for specific row?

SatanFatalityz

Link to test case:
Debugger code (debug.datatables.net):

function searchforfsrecords(){
    var inactemp=$('#exemployee').val();
    var curemp=$('#curemp').val();
    var weekend=$('#weekend').val();

    $('#tbledtchours').DataTable({
      destroy:true,
      paging:false,
      scrollY:300,
      searching:false,
      bInfo:false,
      ajax:{
        url:'http://localhost:8081/timescalealpha/src/php/adminfs.php?inactemp='+inactemp+'&curemp='+curemp+'&weekend='+weekend+'',
        dataSrc:''
      },
      columns:[
        {title:'TimeIn:',data:'TimeIn',
          mRender:function(data,type,row){
            var editedvalue="";
            return "<input type='textbox' value='"+data+"'>"
            console.log(data);
          },
        },
        {title:'InCodeb:',data:'InCode'},
        {title:'TimeOut:',data:'TimeOut'},
        {title:'OutCode:',data:'OutCode'},
        {title:'Hours:',data:'Hours'},
        {title:'Comments:',data:'Comments'},
        {title:'Save:',data:'ID',
          mRender:function(data,type,row){
            return "<button class='btn btn-primary' type='submit' formaction='http://localhost:8081/timescalealpha/src/php/updatefsrecord.php?timein="+data+"'>Save</button>";
          },
        },
      ],
    });
  }

Error messages shown:
No error not doing as attended.
Description of problem:
I want to be able to click save button, then for lets say we click button row 1, I want to grab the edited value, let say TimeIn was 9:00AM but we changed it to 10:00AM. I want to pass 10:00AM, everything I have tried has only grab 9:00AM even tho I have change the value of the textbox on screen.

Any advice would be helpful.

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

colin

Because the DataTables doesn't know there's an input element in the cell, you need to get the node with cell().node(), and then access it via that. Here's a working example (edit the top line and press the button) - the important bit of code is this:

  let node = table.cell($('tbody tr:eq(0)'), 1).node();
  console.log($('input', node).val())

Colin

SatanFatalityz

Would I then use closest to get just the row the button is click in? Otherwise would i have to code out each row that would be in the table?

SatanFatalityz

I am getting closer, just need some clarfication:

How would i go about grabbing column TimeIn and TimeOut

$('#tbledtchours tbody').on('change','td',function(){
  var timein=table.cell(this).nodes().to$().find('input').val();
  console.log(timein);
});

kthorngren

Yes, you can use jQuery closest() to get the td and tr of the clicked button. You can pass the td into the cell() API. See the cell-selector docs for more options.

For example:

$('#example tbody').on('click', 'td > .btn', function () {
  var td = $(this).closest('td');
  console.log( $(table.cell(td).node()).text() );
});

Kevin

SatanFatalityz

I am having issue where when I click on the cell i get what's inside the input box, however when I click button I get nothing.

var table=$('#tbledtchours').DataTable({
      destroy:true,
      paging:false,
      scrollY:300,
      searching:false,
      bInfo:false,
      ajax:{
        url:'http://localhost:8081/timescalealpha/src/php/adminfs.php?inactemp='+inactemp+'&curemp='+curemp+'&weekend='+weekend+'',
        dataSrc:''
      },
      columns:[
        {title:'TimeIn:',data:'TimeIn',
          mRender:function(data,type,row){
            return "<input class='timein' value='"+data+"'>"
          },
        },
        {title:'InCodeb:',data:'InCode'},
        {title:'TimeOut:',data:'TimeOut',
          mRender:function(data,type,row){
            return "<input class='timeout' value='"+data+"'>"
          },
        },
        {title:'OutCode:',data:'OutCode'},
        {title:'Hours:',data:'Hours'},
        {title:'Comments:',data:'Comments'},
        {title:'Save:',data:'ID',
          mRender:function(data,type,row){
            
            return "<button class='btn btn-primary btnsave' type='button'>Save</button>";
          },
        },
      ],
    });

call function

    $('#tbledtchours tbody').on('click','td','.btnsave',function(){
      var timein=table.cell(this).nodes().to$().find('input').val();
      //var timeout=table.cell(this).nodes().to$().find('timeout').val();
      //var td=$(this).closest('td');
      //var timein=$(table.cell(td).node()).val();
      console.log(timein);
      //console.log(timeout);
    });

kthorngren

Probably what you want to do is get the closest row. Use that along with the column index for the cell() API call. Like this:
https://live.datatables.net/qiraqiko/1/edit

If you still need help then please update my example with your code so we can help debug.

Kevin