how to enable row selection for row within a scripted template

mcmSEA

Hello -- I'm using DataTables within a scripted template, as follows:
[code]





Match Number


Match Date Time


Opponent


MatchType


MatchResult


Score




{#foreach $T as record}


{$T.record.MatchNumber}


{$T.record.MatchDateTime}


{$T.record.Opponent}


{$T.record.JsonMatchType}


{$T.record.JsonMatchResult}


{$T.record.Score}


{#/for}



[/code]

Displaying the data provided via ajax works fine, but I can't get a row selection event handler wired up. I think it is because my table "matchesTable" is inside of a script tag and the event isn't being bubbled out.

Am I using the template mechanism incorrectly? Here's the script I'm using to initialize and try to set up the event handler:

[code]

<!-- leave an open comment to stop old browser from displaying JS code

var oTable;
var gaiSelected = [];

$(document).ready(function () {

/* Add a click handler to the rows - this could be used as a callback */
$("#matchesTable tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});


// init the Matches table
$.ajax({
type:"POST",
url: "<%= Url.Action("GetData", "Match" ) %>",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
$("#jTemplateDemo").setTemplate($("#matchesTemplate").html());
$("#jTemplateDemo").processTemplate(data);

$('#matchesTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "sTitle": "Number" },
{ "sTitle": "Date & Time" },
{ "sTitle": "Opponent" },
{ "sTitle": "Type" },
{"sTitle": "Result"},
{ "sTitle": "Score" }],
"aaSorting": [[ 0, "asc" ]],
"bPaginate": false,
"bFilter": true,
"bSort": true,
});
}
});

/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();

for ( var i=0 ; i

[/code]

Thanks in advance for any help; I'm new to DataTables as you can see :).

Regards - Michael

allan

You are adding the event listeners to the table and the overwriting the table element (which will remove the old elements and it's attached listeners) before initialising DataTables. That is my guess for what is happening here. I'd suggest using a $.live() event handler on the TR elements, rather than a static one on the TBODY.

Allan