TableTools reinitialization IE8

Toutouna

Hello,

I have a button which calls ajax to get data and creates a DataTable with TableTools.
This opens a dialog (jquery-ui) and creates the DataTable and all is working.
When I close the dialog, I destroy the DataTable.
But when I reopen it, TableTools doesn't work on IE8. I have the following error: "Object doesn't support property or method"

Here is a part of the code:

$.ajax({
                url: path, // page called
                type: 'POST',
                dataType: 'json',
                success: function(json) { // success
                    if(json.length !== 0 && json !== "") {
                        $( "#dialog-details" ).html('<table id="dataTable'+id+'" class="dataTable" cellspacing="0" width="100%"></table>');
                        $( $("#dataTable"+id) ).dataTable({
                            "dom": 'T<"clear"><"top"if><rt><"bottom"lp>',
                            "tableTools": {
                                "aButtons": [{
                                    "sExtends": "collection",
                                    "sButtonText": "Extract",
                                    "aButtons": [ "csv", "xls" ]
                                }],
                                "sSwfPath": "{{ asset('javascript/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf') }}"
                            },
                            "lengthMenu": [[30, 50, 100, -1], [30, 50, 100, "All"]],
                            "iDisplayLength": 30,
                            "scrollY": "498px",
                            "scrollCollapse": true,
                            "pagingType": "full_numbers",
                            "jQueryUI": true,
                            "oLanguage": { "sSearch": "Search " },
                            "bDeferRender": true,
                            "bDestroy": true,
                            "data": json['data'],
                            "aoColumns": json['columns']
                        });
                    }
...

$("#dialog-details").dialog({
                resizable: false,
                autoOpen: false,
                width: 1005,
                maxHeight: 660,
                open: function( event, ui ) {
                    $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
                },
                close: function( event, ui ) {
                    var active = $( "#tabs" ).tabs("option", "active");
                    var scriptid = active + 1;
                    var table = $( "#dataTable" + scriptid ).DataTable();
                    table.destroy(true);
                    $( "#dialog-details" ).empty();
                }
            });

Thank you for your help.

Toutouna

Bump

Toutouna

After reasearch I found where the bug is but I can't fix it.
The bug happens line 20 with "this.movie.clearText();"
IE doesn't know this method, because when I reinitialize the dataTable, this method is called even if I don't click on tableTools button.

case 'load':
                // movie claims it is ready, but in IE this isn't always the case...
                // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
                this.movie = document.getElementById(this.movieId);
                if (!this.movie) {
                    self = this;
                    setTimeout( function() { self.receiveEvent('load', null); }, 1 );
                    return;
                }

                // firefox on pc needs a "kick" in order to set these in certain cases
                if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
                    self = this;
                    setTimeout( function() { self.receiveEvent('load', null); }, 100 );
                    this.ready = true;
                    return;
                }

                this.ready = true;
                this.movie.clearText();
                this.movie.appendText( this.clipText );
                this.movie.setFileName( this.fileName );
                this.movie.setAction( this.action );
                this.movie.setCharSet( this.charSet );
                this.movie.setBomInc( this.incBom );
                this.movie.setHandCursor( this.handCursorEnabled );
                break;

Toutouna

Nobody can help me ?