I am charged with validating input from a popup that is triggered when the user clicks on a Datatables row, enters some data, and submits the data. We have a rules engine that examines the submitted data, applies QA checks to the data, and then needs to return to the popup with any errors or warnings that occur.

I am simply trying to pop up the correct row into the popup, and I cannot figure out how to get the data from the row simply from the index.

Data table and code. Comments in the code to identify what works and what doesn’t.

(function($) {

    var agencyFactorsTable;

    ABC.page.init = function(options) {

    agencyFactorsTable = $('#agencyFactorsTable').DataTable({
        columnDefs: [
            { "type": "string", 
              "targets": [
                  options.groupColumnsSize, 
                  options.groupColumnsSize + 4, 
                  options.groupColumnsSize + 6, 
                  options.groupColumnsSize + 7], 
                  render: function(data, type, full, meta){
                      if (type === 'filter' || type === 'sort') {
                          var api = new $.fn.dataTable.Api(meta.settings);
                          var td = api.cell({row: meta.row, column: meta.col}).node();
                          data = $('select, input[type="text"]', td).val();
                      }

                      return data;
                  } 
            }
        ],
        "bJQueryUI": true,
        "bSortClasses": false,
        "sPaginationType": "full_numbers",
        "aaSorting": options.defaultOrder,
        "bAutoWidth": false,
        "bFilter": true,
        "iDisplayLength": 10,
        "dom": '<"H"lrM><"dataTables_scroll"t><"F"ipE>',
        "columns" : options.columns,
        "oLanguage": EIS.settings.dataTablesLanguage,
        "bProcessing": true,
        "processing": true,
        "bServerSide": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": true,
        "sInfo": "Showing _START_ to _TOTAL_ entries",
        "ajaxSource": options.templateDataUrl,
        "ajax": {
            "url": options.templateDataUrl,
            "dataSrc": "aaData"
        }
    });

    $("#dialog-edit").dialog({
        autoOpen: false,
        modal: true,
        width: 760,
        height: 500,
        buttons: []
    });
        
    agencyFactorsTable.on('click', 'tbody tr td img.edit_dialog', function() {
        showPopup(this.parentNode);
    });
        
    function showPopup(selectedNode) {
        var $source = agencyFactorsTable;
        var data;
        if (options.selectedRowId != null) {
            // set the index hidden field
            $("#selectedRowId").val(options.selectedRowId);
            // get the data by index, this does not work, I get "undefined" for the value of data
            data = agencyFactorsTable.row(options.selectedRowId).data(); // data = undefined
//            data = agencyFactorsTable.row(options.selectedRowId); // data = _Api {0: Array{1}, length: 1, selector ... <- this is not what I want, I want the array
//            data = $source.row(options.selectedRowId).data(); // data = undefined
//            data = $source.row(options.selectedRowId); // data = _Api {0: Array{1}, length: 1, selector ... <- this is not what I want, I want the array
        } else {
            // set hidden field value for selected row index, to pass back to server
            $("#selectedRowId").val($source.row(selectedNode).index());
            // get the data by selected node, set above
            data = $source.row(selectedNode).data(); // data = Array(18) <- this is correct
        }

        $('#dialog-edit').dialog('open');
        return false;
    };
        
    if (options.selectedRowId != null) {
        showPopup();
    };

};
})(jQuery);

I have tried about every combination of table.row(index) and $source.row(index) and I cannot seem to get the array containing the data on the specific row back.

What am I doing wrong?