Using DataTables in jQuery.Dialog() doesn't work

peter.jansen

Hi,

my web application shows a page in a jQuery dialog window. This page contains a DataTable object with the plug in TableTools. Everthing is working fine - but only for one time. When I close this dialog and open it again, the table will be shown, but it doesn't work very well. There are many mistakes, but not everytime the same one:

1. I'm using "full_numbers" pagination. The click event is handling (switch pages), but it shows always page 1 in the control.
2. Row details (http://www.datatables.net/examples/server_side/row_details.html) don't work, when I open the dialog again.
3. TableTools - printing: I can see the print preview, but I can't close it by ESC.
4. Nearly every mouse click throws a javascript error.
5. It is also often not possible to close this (new) dialog.

Any ideas? It looks like an jquery.Dialog error, but only when I'm using DataTables :(

I'm currently using:
1. jQuery: jquery-1.6.1.min.js
2. DataTables: 1.7.6.
3. TableTools: 2.0.1

allan

What makes you think it's a jquery.Dialog error? Is there a Javascript error on the console or something?

Allan

peter.jansen

I'm not sure. But I suppose, that when I close the dialog, the table is still "alive". So when I reopen the dialog, their are some proberties with a wrong value or so. I'm not care.

Cause, when I open the dialog, close it and reload the whole page - everything works fine. When I open the dialog, close it and reopen it without reloading the main page the table doesn't work.

I'm using firebug and it shows many different mistakes. For example:
1. "this.movie.clearText is not a function, http://localhost:55530/Scripts/jquery-1.6.1.min.js, Line 28"
2. "a is null, http://localhost:55530/Scripts/jquery.dataTables.min.js, Line 94"

allan

If the dialogue is deleting DOM elements then it might be possible that something funny is happening to the Flash movie - although I would have through it would just remove it form the document DOM and then show them again when needed. If you disable TableTools does it work?

Allan

peter.jansen

hi allan,

I disabled the TableTools. The first bug is gone, but the second one will be also thrown, when I click on the "show details"-icon

1. a is null - http://localhost:55530/Scripts/jquery.dataTables.min.js - Line 94

and when I click on this icon again (hide details)... following error will be displayed:
1. b is null - http://localhost:55530/Scripts/jquery.dataTables.min.js - Line 117

The Code is...
[code]
$('#tblDocuments tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;

if (this.src.match('minus')) {
/* This row is already open - close it */
this.src = "/Content/images/icon_plus_white.png";
myDocumentsTable.fnClose(nTr);
}
else {
/* Open this row */
// var aData = myDocumentsTable.fnGetData(nTr)
myDocumentsTable.fnOpen(nTr, "TEST", 'details');
}
});
[/code]

I checked all objects ... myDocumentsTable and nTr are not NULL. But it cannot start the methods "fnGetData" and "fnOpen". It stopped there. How can I solve this behaviour?

Peter

allan

I'd be tempted to try destroying the table (fnDestroy) and then initialising it when the dialogue is shown again - but that doesn't seem very clean to me. However, beyond that would out more extensive debugging I don't have a good answer for you. I'm sure that an answer can be found by adding debug into the code - console.log etc to track the path of the code and see where it is going funny.

Allan

peter.jansen

hi allan,

I show in the dialog popup a page, which contains the DataTable.

The initialising part is like this...
[code]
var myDocumentsTable = $('#tblMyDocuments').dataTable({
"aaSorting": [[4, 'asc']],
...
"sPaginationType": "full_numbers"
});
[/code]

I added a new event handler to destroy the table...
[code]
$( ".dialog" ).bind( "dialogclose", function(event, ui) {
myDocumentsTable.fnDestroy();
});
[/code]

now when I open the dialog first time ... the table will be shown in right way. when I close this dialog, the table "should" be destroy :) When I open the dialog again, the errors will also be thrown :( ... but now I have another "feature" - I cannot open the dialog a third time. Nothing happens :D

at the moment I reload the whole page, when the dialog will be closed. But it looks not so nice. I hope, I can find a right solution.

short hint ... I replaced the min version with the full datatable-script. it stopps working at line 1657. oSettings is null and iRow is undefined ... with F11 it run to line 4633 - an empty one - and then it stopps :-?
[code]
1655 if (oSettings.aoColumns[i].fnRender !== null) {
1656 sDisplay = oSettings.aoColumns[i].fnRender({
1657 "iDataRow": iRow,
1658 "iDataColumn": i,
1659 "aData": oSettings.aoData[iRow]._aData,
1660 "oSettings": oSettings
1661 });
[/code]

aserafin

I had the same problem today. It seems that when you open dialog for the second time and click on details image event is handled by the wrong function (first hooked to 'click' event). Solution to this situtation is to unbind click event on closing dialog like this:

[code]
$( ".dialog" ).bind( "dialogclose", function(event, ui) {
$('#tblDocuments tbody td img').die('click');
});
[/code]

isaacd

I am having the same issue.

The second time I load a JQuery dialog, the expand method of the hidden row doesn't work.

A couple symptoms I am seeing are that the send time you open the dialog, I can click 3 times on the expand image and it will then load. On the 3rd or later times, it only just changes the image as in the image change script.

Another weird symptom is that in Firebug under the scripts tab, I keep getting more scripts in the list of loaded scripts under [code]http://localhost:58299/Scripts/jquery-ui-1.8.11.js/eval/seq/[/code]
The list goes from 4 for the first opening then adds another 3 on each additional opening of the dialog.

The error I see in the console is that aData, a local variable which gets filled by fnGetData, is null.

As Peter said, a refresh of the page upon closing the dialog makes everything work correctly but is an inelegant solution. I have a MVC Partial view which won't reload with a simple refresh of the page on the one of 2 pages with this issue.

I will keep drilling down into the script and try and see where it is failing...