When using server-side population, I'm losing jQuery row click ability...???

mvelasquez

I switched my grid to server-side sAjaxSource processing due to having potentially thousands of records.
I accommodated the filtering and sorting server-side, but now it seems I've lost the ability to click and/or double click a row and fire a jQuery event?
Can I no longer make references to datatables fnGetPosition and fnGetData methods within a jQuery "TR" click event?

I assume this is due to the grid being redrawn constantly?

How can this be fixed?

Here's my code:

[code]
var vTable;

$(document).ready(function() {

$('#vendorLookupClose').click(function() {
$("#vendorLookupContentDiv").hide();
});

vTable = $('#vendorItems').dataTable({
"aoColumns": [
{ "sTitle": "Id" },
{ "sTitle": "Name" },
{ "sTitle": "City" },
{ "sTitle": "State" }
],
"bPaginate": false,
"bLengthChange": false,
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "/KTClient/Tag/GetJSONVendorList/1?companyName=" + $('#companyNameHiddenFieldValue').val()
});

$("#vendorItems tbody").click(function(event) {
// $(vTable.fnSettings().aoData).each(function() {
// $(this.nTr).removeClass('row_selected');
// });
$(event.target.parentNode).addClass('row_selected');
});

$('#vendorItems tbody tr').dblclick(function() {
var vendorTagId = $("#VendorTagId").val();
var vendorId = $("#SelectedVendorId").val();
var vendorName = $("#SelectedVendorName").val();
vendorId = jQuery.trim(vendorId);
vendorName = jQuery.trim(vendorName);
$("#vendorId").val(vendorId);
document.getElementById(vendorTagId).value = vendorId;
//$(vendorTagId).val(vendorId);
//$('#txtVendorId').val(vendorId);
$('#headerVendorName').html(vendorName);
$('#headerVendorId').html(vendorId);
$("#vendorLookupContentDiv").hide();
var tagToBlankOut = '#' + $('#glTagId').val();
$(tagToBlankOut).val("");
$("#ledgerAccountData").val("");
$("#UseExAccData").val("false");
$(tagToBlankOut).unbind();
});

$('#vendorItems tbody tr').click(function() {
/* Get the position of the current data from the node */
var aPos = vTable.fnGetPosition(this);
/* Get the data array for this row */
var aData = vTable.fnGetData(this);
/* set site hidden field value */
var svid = $("#SelectedVendorId");
var gvid = aData[0];
gvid = gvid.replace(/\&/g, '&');
svid.val(gvid);
var svn = $("#SelectedVendorName");
var gvn = aData[1];
gvn = gvn.replace(/\&/g, '&');
svn.val(gvn);
//alert('vendor id: ' + svid.val());
//alert('vendor name: ' + svn.val());
});

$("#submitVendorSave").click(function(event) {
var vendorTagId = $("#VendorTagId").val();
var vendorId = $("#SelectedVendorId").val();
var vendorName = $("#SelectedVendorName").val();
vendorId = jQuery.trim(vendorId);
vendorName = jQuery.trim(vendorName);
$("#vendorId").val(vendorId);
$("#vendorNameHiddenFieldValue").val(vendorName);
document.getElementById(vendorTagId).value = vendorId;
//$(vendorTagId).val(vendorId);
//$('#txtVendorId').val(vendorId);
$('#headerVendorName').html(vendorName);
$('#headerVendorId').html(vendorId);
$("#vendorLookupContentDiv").hide();
var tagToBlankOut = '#' + $('#glTagId').val();
$(tagToBlankOut).val("");
$("#ledgerAccountData").val("");
$("#UseExAccData").val("false");
$(tagToBlankOut).unbind();
});
});

[/code]

allan

The way I recommend is to use live events - see this FAQ for more information: http://datatables.net/faqs#ss_events

Allan

mvelasquez

that worked, thanks :)

drace

Could you please post or show an example of how to use $.live() with it?

allan

Change:

[code]
$("#submitVendorSave").click(function(event) {
[/code]

to:

[code]
$("#submitVendorSave").live('click', function(event) {
[/code]

(or whatever the equivalent is in your code).

Allan