Click a row and call javascript function
Click a row and call javascript function
danh
Posts: 3Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
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
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
[code]$('#myTable').on('click', 'tr', function(event) {
$('#myTable').fnGetData(this);
}).on('dblclick', 'td', function(event) {
$(this).css('background', '#000');
});[/code]
But as you say, 1.7+ use on/off :-)
Allan