Add Event Listeners to newly created records with button groups
Add Event Listeners to newly created records with button groups
amun1000
Posts: 7Questions: 1Answers: 0
Hi I have the following code which makes an ajax call to populate a table of widgets each of which has a state. The buttons i nthe final column are dependent upon this state, however the click event listners are not being bound after the ajax call - how can i get around this
[code]
$(document).ready(function () {
var oTable = $('#example').dataTable({
"bServerSide": false,
"sAjaxSource": "/Vehicle/GetParts",
"sAjaxDataProp": "",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "id", "value": "@Model.Id" } );},
"bProcessing": true,
"aoColumns": [
{
"sName": "Part",
"bSearchable": true,
"bSortable": true,
"fnRender": function (oObj) {
return oObj.aData.DisplayName;
}
},
{
"sName": "Price",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return '';
}
},
{
"sName": "Notes",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return '';
}
},
{
"sName": "Action",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return buildActionButtons(oObj);
}
}
],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('td:eq(0)', nRow).css('width', '320px');
//Pending
if (aData.Status == 0) {
$(nRow).addClass('status-forsale');
}
else if (aData.Status == 1) {
$( nRow).addClass('status-pending');
}
if (aData.Status == 2) {
$(nRow).addClass('status-sold');
}
}
});
function buildActionButtons(oObj) {
var data = oObj.aData;
var id = data.Id;
var vehicleId = data.VehicleId;
var status = data.Status;
//Sold Button
var sBtn = '';
var csBtn = '';
var pBtn = '';
return "" + sBtn + csBtn + pBtn + "";
}
});
[/code]
HTML
[code]
Name
Price
Notes
Action
[/code]
[code]
$(document).ready(function () {
var oTable = $('#example').dataTable({
"bServerSide": false,
"sAjaxSource": "/Vehicle/GetParts",
"sAjaxDataProp": "",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "id", "value": "@Model.Id" } );},
"bProcessing": true,
"aoColumns": [
{
"sName": "Part",
"bSearchable": true,
"bSortable": true,
"fnRender": function (oObj) {
return oObj.aData.DisplayName;
}
},
{
"sName": "Price",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return '';
}
},
{
"sName": "Notes",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return '';
}
},
{
"sName": "Action",
"bSearchable": true,
"bSortable": false,
"fnRender": function (oObj) {
return buildActionButtons(oObj);
}
}
],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('td:eq(0)', nRow).css('width', '320px');
//Pending
if (aData.Status == 0) {
$(nRow).addClass('status-forsale');
}
else if (aData.Status == 1) {
$( nRow).addClass('status-pending');
}
if (aData.Status == 2) {
$(nRow).addClass('status-sold');
}
}
});
function buildActionButtons(oObj) {
var data = oObj.aData;
var id = data.Id;
var vehicleId = data.VehicleId;
var status = data.Status;
//Sold Button
var sBtn = '';
var csBtn = '';
var pBtn = '';
return "" + sBtn + csBtn + pBtn + "";
}
});
[/code]
HTML
[code]
Name
Price
Notes
Action
[/code]
This discussion has been closed.
Replies