Click a row and call javascript function

danh

Really nice product, Allan! Great job and thanks so much.

I'm a newbie coder so sorry I'm missing something that I know is already written about in the forums. After an ajax call, I dynamically create the data array, and then I initialize the Data Table. What I want to do now is this: when the user clicks a row, I want to call a javascript function and send the hidden ID variable as the parameter. I've been reading the forums so I know it's possible, but I'm just not getting it. Below is my code (some of which I took from another forum - thanks everyone!). The error I get is "myTable.fnGetPosition is not a function." What am I doing wrong? Thanks so much for the help.

[code]
$('#myTable').dataTable( {
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": 14,
"aaData": dataArray,
"bProcessing": true,
"aoColumns": [{"sTitle": "id", "bVisible": false},{"sTitle": "Date"},{"sTitle": "Version"},{"sTitle": "Outcome"}]
});

$("#myTable tbody tr").live("click", function(event){
var position = myTable.fnGetPosition(this); // getting the clicked row position
var id = myTable.fnGetData(position)[0]; // getting the value of the first (invisible) column
displayUserInfo(id);
});
}
[/code]

allan

> "myTable.fnGetPosition is not a function."

You don't have a variable called myTable! :-). You have a DOM element with the id of myTable, but That doesn't make it available in Javascript (unlike ActionScript 3 / MXML if you've been using that before).

Just do:

[code]
var myTable = $('myTable').dataTable( {...
[/code]

Out of interest, which part of the documentation did you find that suggested using fnGetPosition? I want to remove that - fnGetPosition should almost never be used. fnGetData will accept the TR element, so you can do this:

[code]
$("#myTable tbody tr").live("click", function(event){
var id = myTable.fnGetData(this)[0];
displayUserInfo(id);
});
}
[/code]

Allan

danh

Hi Allan,
Thanks so much for the help, the quick reply, and the lesson. Funny thing: today while I was at my day job, I had a fleeting thought that perhaps this was it. Appreciate your confirming it and helping out so graciously!

I found out about fnGetPosition in another forum:
http://www.datatables.net/forums/discussion/200/getting-values-from-hidden-column-rows/p1

I updated my code with fnGetData and it works perfectly! Really appreciate the help -- I was tearing out what little hair I have last night!

Dan

ttback

hey Allan, wouldn't use .on() be more standard since I read many posts on stackoverflow suggesting that .live() can lead to unexpected behaviors?

jcready

Yes, you can also use .on()

[code]$('#myTable').on('click', 'tr', function(event) {
$('#myTable').fnGetData(this);
}).on('dblclick', 'td', function(event) {
$(this).css('background', '#000');
});[/code]

allan

Yes - using $().on is now the jQuery recommended way of assigning event handlers. However, danh's code had $().live in it, so I just kept it like that so as not to confuse matters. Quite possibly that danh is using a version of jQuery before 1.7 as well.

But as you say, 1.7+ use on/off :-)

Allan