I can't get the selected row out of the jquery function

tnepomuceno

I'm getting the row data inside the $(), but when i try to get the same data from outside of the function returns undefined. I am using Angular 9. I've been working on that for more than 48 hours =/ and can't get the problem solved. Hope you guys can give me a hand on that. He is a part of my code...

HTML

#dataTable class="table table-striped" style="width:100%">

TS
@ViewChild('dataTable', { static: true }) table;
dataTable: any;
dtOptions: any;
dTable;
stockSelected;

ngOnInit(): void {
this.service.getStocks().subscribe(stocks => {
this.stocks = stocks;
this.getDataFromSource();
}
);
}

getDataFromSource() {
this.dtOptions = {
destroy: true,
data: this.stocks,
columns: [
{ title: 'Paper', data: 'paper' },
{ title: 'Grade', data: 'grade' },
{ title: 'Qtde.', data: 'quantity', render: $.fn.dataTable.render.number('.', ',', 0, '', ' Units') },
{
title: 'Edit/Delete', data: 'id', render: function (data) {
return '<a class="btn btn-outline-secondary" href="/stocks-form/' + data + '"><i class="fa fa-pencil-alt"></i></a>\
<a class="btn btn-outline-danger" data-toggle="modal" data-target="#modalDelete" ><i class="fa fa-trash-alt"></i></a>';
}
}
]
};
$(document).on('click', 'tr', function () {
this.dTable = $('#example').DataTable();
this.stockSelected = this.dTable.row(this).data();
console.log(this.stockSelected) --> returns the data of the selected row
});
console.log(this.stockSelected) --> returns undefined
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
}

What am I doing wrong? How can I send the data of the row selected to outside of the jquery function?

kthorngren

console.log(this.stockSelected) --> returns undefined

this inside the click event is the row clicked. But this doesn't exist outside the scope of the click event. Try using a global variable. Maybe something like this:

var stockSelected;
$(document).on('click', 'tr', function () {
this.dTable = $('#example').DataTable();
stockSelected = this.dTable.row(this).data();
console.log(this.stockSelected) --> returns the data of the selected row
});
console.log(stockSelected) --> returns undefined

Kevin

tnepomuceno

Thanks for you answer kevin, but in Angular when I declared

dtOptions: any;
dTable;
stockSelected; --> global variable in angular

That's already a global variable, and the value should be changing when I had set

this.stockSelected = this.dTable.row(this).data();

For example:

test1;
test23=0;

ngOnInit(): void {
this.test1=5;
this.test23 = this.teste1;
this.test2();
}

test2(){
console.log(this.test23) --> ** that will print 5**
}

tnepomuceno

I solved using that

this.dtOptions = {
...
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
$('td', row).unbind('click');
$('td', row).bind('click', () => {
self.someClickHandler(data);
});
return row;
}}

someClickHandler(info: any): void {
this.stockSelected = info;
}