unable to select any rows in the editor

dorudavidson

I am unable to select rows in my table for deleting or editing. Creating a new record works fine. My setup is pretty vanilla. What am I doing wrong?
[code]

var editor;

$(document).ready(function() {

editor = new $.fn.dataTable.Editor({
"ajaxUrl": "/cfc/tables.cfc?method=setShippingCarriers",
"domTable": "#carriers",
"idSrc": "id",
"fields": [
{ "label":"Active", "name":"is_active" }
, { "label":"Order", "name":"display_order" }
, { "label":"Carrier", "name":"shipping_carrier" }
, { "label":"Description", "name":"description" }
, { "label":"Tracking URL", "name":"tracking_url", "type":"textarea" }
]
});

$('##carriers').dataTable( {
"bProcessing": true,
"sDom" : "Tfrtip",
"aaSorting": [[ 2, 'asc' ]],
"sAjaxSource" : "/cfc/tables.cfc?method=getShippingCarriers&returnformat=json",
"aoColumns": [
{ "mData":"id", "sType": "numeric", "sClass": "center" }
, { "mData":"is_active", "sClass": "center",
"mRender": function (data, type, full ) {
if (data == true) {
return '';
}
else {
return '';
}
}
}
, { "mData":"display_order", "sType": "numeric", "sClass": "center" }
, { "mData":"shipping_carrier", "sClass": "center", "bSortable":false }
, { "mData":"description", "sClass": "center", "bSortable":false }
, { "mData":"tracking_url", "sType": "string", "sClass": "center", "bSortable":false }
],
"oTableTools" : {
"sRowSelect" : "multi",
"aButtons" : [
{ "sExtends" : "editor_create", "editor" : editor }
, { "sExtends" : "editor_edit", "editor" : editor }
, { "sExtends" : "editor_remove", "editor" : editor }
]
}
} );

} );

[/code]

Below is the json being returned:
[code]

{
"aaData": [
{
"description": "",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 1,
"display_order": 1,
"shipping_carrier": "FedEx Overnight (insured)",
"is_active": 1,
"DT_RowId": "row_1"
},
{
"description": "",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 2,
"display_order": 2,
"shipping_carrier": "FedEx 2-day (insured)",
"is_active": 1,
"DT_RowId": "row_2"
},
{
"description": "",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 3,
"display_order": 3,
"shipping_carrier": "FedEx Saver 3-day (insured)",
"is_active": 0,
"DT_RowId": "row_3"
},
{
"description": "",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 4,
"display_order": 4,
"shipping_carrier": "FedEx Ground (insured)",
"is_active": 1,
"DT_RowId": "row_4"
},
{
"description": "(usually overnight)",
"tracking_url": "",
"id": 7,
"display_order": 5,
"shipping_carrier": "US Post Office Express Mail",
"is_active": 1,
"DT_RowId": "row_7"
},
{
"description": "(usually 2-3 days)",
"tracking_url": "",
"id": 8,
"display_order": 6,
"shipping_carrier": "US Post Office Priority Mail",
"is_active": 1,
"DT_RowId": "row_8"
},
{
"description": "(1-3 days)",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 5,
"display_order": 7,
"shipping_carrier": "FedEx International Priority (insured)",
"is_active": 1,
"DT_RowId": "row_5"
},
{
"description": "(within 5 days)",
"tracking_url": "http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcom&cntry_code=us&language=english&tracknumbers=",
"id": 6,
"display_order": 8,
"shipping_carrier": "FedEx International Economy (insured)",
"is_active": 1,
"DT_RowId": "row_6"
}
]
}

[/code]

dorudavidson

Anyone?

allan

Sorry for the delay in replying. Are you abler o link us to the page please?

From your code everything looks like it should work. When you click a row and then the edit button, does the edit box show up, or just nothing happen? I ask because I'm wondering if the CSS class for highlighting the selected rows isn't being included or is being overwritten somewhere.

Allan

dorudavidson

Hi Allan,

unfortunately, I am unable to link to a page, as it is on my own local sandbox. It is not CSS related, because nothing happens when selecting a row. Firebug does not show any changes on that click.

Naturally, because of that, the Edit and Delete buttons are still disabled. Where should I look in order to debug the row(s) select?

allan

Interesting! The first thing I would suggest doing is running Visual Event on the page: http://sprymedia.co.uk/article/Visual+Event+2 . It will show if there are event handlers attached to the table rows or not. There should be, although it sounds like there might not be. I can't see any reason why that would be the case those. Which version of TableTools are you using? If not the currently nightly, try that: http://datatables.net/download .

Allan

dorudavidson

Thanks for the answer Allan. I am at a loss here. Visual Event does not show any events. I know it must be something stupid, but I don't seem find what it is. I double-checked the includes, and as far as I can tell, I'm loading everything.

I had Datatables 1.9.4 already, but I got a fresh copy from the link, just in case. If you can think of anything else that could cause the issues, please let me know. Thanks!

dorudavidson

I was able to get it going, once I saw that the datatables package includes jquery 1.8.2 I was loading 1.10.1 from //ajax.googleapis.com/. Once I changed to 1.8.2 all looks good.

Thanks for your help, Allan! Are you planning on supporting jquery 1.10 anytime soon?

Doru

allan

More and more interesting! DataTables 1.9 should fully support jQuery 1.10. Older versions of TableTools don't though - so I wonder if that was the problem. If you are using TableTools for the DataTables download package, then it might well be that.

The latest TableTools package is available not he downloads page and does support 1.10+ / 2+: http://datatables.net/download .

Allan