Destroy throwing Uncaught Error: Invalid Selector

[DaveHightowerParticipant]

Greetings again–

This may be a total beginner question — if so, I apologize –I’m trying to move from JqGrid, and it’s proving a bit….challenging.

I have a table of data, some of which are clickable. When a user clicks on that data field, I append a div to an initialized jqxWindow, initialize the div as a datatable, load the data from the server for this new table, then open the window.

I originally used a static datatable, but the window would open with the datatable in an unstable state — it would have the correct data, but would show whatever page was open on the previous view. In reading the forums I read that I could destroy the databable when the user closes the jqxwindow, then append it (and initialize as a datatable) the next time the user clicked on the link.

In metacode:

initialize jqxWindow (autoOpen:false)– no content
initialize datatable1
load data for datatable1

when user clicks on a cell in datatable1
append “<div id=’usageDataTable’></div>” to jqxWindow content div
initialize div#usageDataTable as jqxdatatable ( $(“#usageDataTable”).jqxDataTable(…) )
load data
open jqxWindow
when user closes jqxWindow
destroy datatable ( $(“#usageDataTable”).jqxDataTable(‘destroy’) )
Repeat

The first time through it works without a problem; however, the second time jqxDataTable(‘destroy’) is called, an error is thrown:

$(“#detailWindow”).on
(
‘close’,
function (event)
{
$(“#usageDataTable”).jqxDataTable(‘destroy’);
}
);

Uncaught Error: Invalid Selector – #usageDataTable! Please, check whether the used ID or CSS Class name is correct.

a.jqx.jqxWidget.a.fn.(anonymous function) jqxcore.js:7
(anonymous function) VM17786 AppIds.js:383
m.event.dispatch jquery-1.11.2.min.js:3
m.event.add.r.handle jquery-1.11.2.min.js:3
m.event.trigger jquery-1.11.2.min.js:3
(anonymous function) jquery-1.11.2.min.js:3
m.extend.each jquery-1.11.2.min.js:2
m.fn.m.each jquery-1.11.2.min.js:3
m.fn.extend.trigger jquery-1.11.2.min.js:3
a.extend._raiseEvent jqxwindow.js:7
a.extend.hide jqxwindow.js:7
a.extend.closeWindow jqxwindow.js:7
a.extend._closeWindow jqxwindow.js:7
(anonymous function) jqxwindow.js:7
m.event.dispatch jquery-1.11.2.min.js:3
m.event.add.r.handle jquery-1.11.2.min.js:3

However, the code functions perfectly.

Am I doing something wrong?

[Peter StoevKeymaster]

Hi DaveHightower,

The destroy works correctly: http://jsfiddle.net/jqwidgets/zxLBk/. Invalid Selector is raised when the ID you tried to select with jQuery is not available in the DOM i.e wrong ID or CSS Class selection. If you’ve destroyed a widget, it won’t be in the DOM anymore which means that calling it again will 100% raise an exception because that time the Selector will be invalid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DaveHightowerParticipant]

Hi Peter —

My bad.

The Datatable was destroyed, but not the jqxWindow; so when it executed the code

$(“#detailWindow”).on
(
‘close’,
function (event)
{
$(“#usageDataTable”).jqxDataTable(‘destroy’);
}
);

it was attaching a second handler for the ‘close’ event.

I fixed it by using $(“#detailWindow”).one instead.

Thanks for the help.

[Author]

Posts