Question

I’m using the latest version of the jquery plugin DataTables and I tried to implement their selectable row and deletion example into my project. My solution works correctly in Firefox but not in Chrome.

So in my partial view I create my table;

    loadSlideShowTable = $("#LoadTable").dataTable({
        "bJQueryUI": true,
        "aaSorting": [[0, 'desc']],
        "aoColumnDefs": [
        { "sType": "date-euro", "aTargets": [5] },
        { "sType": "date-euro", "aTargets": [4] }]
    });

and in my event handler for the row-clicking, I’ve got the following:

    console.log(loadSlideShowTable);
    loadSlideShowTable.$(".LoadTableRowSelected").removeClass("LoadTableRowSelected");

In FireFox the console.log returns:

jQuery(table#LoadTable.dataTable)

In Chrome the console.log returns:

[<table id=​"LoadTable" style>​…​</table>​]
Uncaught TypeError: Object [object Object] has no method '$' 

EDIT: It also works in IE and the console.log returns:

LOG: [object Object] 

So I think the issue here is that Chrome doesn’t seem to ‘know’ that $(“#LoadTable”) is a datatable object.

Answer 1

Since I can’t delete my question, I’ll just post a response with how I fixed it.

I closed all my chrome sessions, reopened my app, and tried again. It worked as it should after that.