faisal abdulai faisal abdulai - 7 months ago 36
Javascript Question

Datatables Uncaught Type Error

I have Datatables together with GridRowCount() to get row counts by specified groups in a html table, the jfiddle site is here. When I run the code the chrome browser throws up an uncaught type error (...).live is not a function.



The error from the console is displayed.



rowtoggle.js:30 Uncaught TypeError: $(...).live is not a function
rowtoggle.js:30 Uncaught TypeError: $(...).live is not a functionGridRowCount @ rowtoggle.js:30(anonymous function) @ rowtoggle.js:16i @ jquery-1.12.2.min.js:2j.fireWith @ jquery-1.12.2.min.js:2n.extend.ready @ jquery-1.12.2.min.js:2K @ jquery-1.12.2.min.js:2
Navigated to http://localhost/datacentre/admin/request_pending.php
rowtoggle.js:30 Uncaught TypeError: $(...).live is not a functionGridRowCount @ rowtoggle.js:30(anonymous function) @ rowtoggle.js:16i @ jquery-1.12.2.min.js:2j.fireWith @ jquery-1.12.2.min.js:2n.extend.ready @ jquery-1.12.2.min.js:2K @ jquery-1.12.2.min.js:2
Navigated to http://localhost/datacentre/admin/request_pending.php







Below is the code of the Datatables and the GroupRowCount() pluggin.



$( document ).ready(function() {
$('#example').dataTable({

"bLengthChange": false,
"bPaginate": false,
"bJQueryUI": true
}).rowGrouping({
iGroupingColumnIndex: 1,
sGroupingColumnSortDirection: "asc",
iGroupingOrderByColumnIndex: 0 ,
bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1,
asExpandedGroups: [""]
});
GridRowCount();
});

function GridRowCount() {
$('span.rowCount-grid').remove();
$('input.expandedOrCollapsedGroup').remove();

$('.dataTables_wrapper').find('[id|=group-id]').each(function () {
var rowCount = $(this).nextUntil('[id|=group-id]').length;
$(this).find('td').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': rowCount })));
});

$('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', { 'type': 'button', 'class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expanded All Group' }));

**$('.expandedOrCollapsedGroup').live('click', function () {
if ($(this).hasClass('collapsed')) {**
$(this).addClass('expanded').removeClass('collapsed').val('Collapse All Group').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click');
}
else {
$(this).addClass('collapsed').removeClass('expanded').val('Expanded All Group').parents('.dataTables_wrapper').find('.expanded-group').trigger('click');
}
});
};




Answer

.live() has been deprecated in jQuery 1.7 and removed in version 1.9. You should use .on()

$('.expandedOrCollapsedGroup').on('click', function () {
//Your code
})
Comments