hidden row example works with jQuery 1.8.3 but broken with 1.9.0

afarber

Hello,

is anybody else getting the error with the pages built after the example
http://www.datatables.net/release-datatables/examples/server_side/row_details.html

[quote]
Uncaught TypeError: Object [object Object] has no method 'live'
[/quote]

At the top source code line here?

[code]
$('#my_table tbody td img').live('click', function(){
var nTr = $(this).parents('tr')[0];
if (cardsTable.fnIsOpen(nTr)) {
this.src = '/images/details_open.png';
cardsTable.fnClose(nTr);
} else {
this.src = '/images/details_close.png';
cardsTable.fnOpen(nTr, renderGame(cardsTable, nTr), 'details');
}
});
[/code]

I will prepare a simplified test case to demonstrate my problem, but I've decided to ask here in the meantime.

I also wonder, how to debug such issues myself, because I don't understand the output of a

[code]
console.dir($('#my_table tbody td img'));
[/code]

The webpage in question is the http://preferans.de/DE11198 and the table is #cards_table.

(Sorry, the DataTables debugger fails to upload - from my network location right now)

I had to hardcode CDN jQuery 1.8.3 there for now.

Thanks for any hints
Alex

MikeS

Its related to this, http://www.datatables.net/forums/discussion/13627/tabletools-error-with-jquery-1.9.0-.live-is-deprecated

allan

Change:

> $('#my_table tbody td img').live('click', function(){

To:

[code]
$('#my_table tbody').on('click', 'td img', function(){
[/code]

Or use the jQuery compatibility module they've released.

I'll be going through the whole site here, as soon as I can to update all old references. That will be as part of the 1.10 work.

Allan

afarber

Thank you, this has worked for me! (my "+" images have the class "details"):

[code]
$('#cards_table tbody').on('click', 'td img.details', function(){
var nTr = $(this).parents('tr')[0];
if (cardsTable.fnIsOpen(nTr)) {
this.src = '/images/details_open.png';
cardsTable.fnClose(nTr);
} else {
this.src = '/images/details_close.png';
cardsTable.fnOpen(nTr, renderGame(cardsTable, nTr), 'details');
}
});
[/code]

billfry

I'm in a similar boat. However, if I just change the '.live' to '.on' it works, but only for the first page / 10. Selecting the drop down box & a higher number of rows, shows those rows, but only the first 10 will display/hide on click.
If I add the 'td img', nothing works. I have a class associated with the image, but doing like @afarber did, does nothing. Not sure what to do but to go back for now.

Wondering about other compatibility issues as well, but I haven't seen anything comparing DataTables 1.9.4 & plugins with jquery & jquery ui versions.

Thanks.

billfry

Oops... wrote too quickly. I noticed subsequent to my above post that I had failed to remove the 'td img' portion from the selector part.
Fixed it. Now it works as it should.

Thanks.