Check if a datatables is initialized from parent frame

pedrono

Hi there,
i have a table in an iframe and I would like to toggle the datatables magic on or off from the parent frame.
However

var table = document.getElementById("frame").contentWindow.$('#doc_table').DataTable();
console.log($.fn.DataTable.isDataTable( table ))

always returns False .

Is there a way to detect the datables status from the parent frame?

Thanks!

Peter

colin

Hi pedrono,

I don't think you need the DataTable() on the end. Give this a try:

var table = document.getElementById("frame").contentWindow.$('#doc_table');
console.log($.fn.DataTable.isDataTable( table ))

Cheers,

Colin

pedrono

Hi Colin,

First it didn't work, but then I realized the probable reason.
I guess the reason is that the datatable is originally initialized in the iframe HTML.
When I initialize the table from the parent HTML, it works!

There is probably no way to detect the datatable, when it is initialized in the iframe HTML?

colin

Hi pedrono,

I've been trying to get an example going, but without success (this is beyond my knowledge I'm afraid). It does seem it should be possible though - there a couple of chats on StackOverflow about accessing elements within an frameset. This one talks about it with standard HTML/javascript, and this one with jQuery.

I hope this help,

Cheers,

Colin

pedrono

Hi Colin,
many thanks for your help.
After some investigation I have decided to skip the ON/OFF switch from the parent HTML and put the switch directly in the iframe at least for now.
That frees me from this cross-scripting problems.

And it actually works rather nicely, at least in Chrome in Firefox.
In ie11 however I get an error when I want to turn ON the switch.
So from ON to OFF (no error), then from OFF to ON
Unable to get property 'parentNode' of undefined or null reference

This is the code for the switch:

   $('#filterSwitch').click(function() {
        var table = $('#doc_table').DataTable();
        
        if( document.getElementById("filterSwitch").innerHTML == 'OFF'){
            $('#doc_table').dataTable({
                destroy: true,
                "bInfo": false,
                autoWidth: false,
                "order": [
                    [0, "asc"],
                    [1, 'asc'],
                    [2, 'asc'],
                    [3, 'asc'],
                    [4, 'asc'],
                ],
                stateSaveCallback: function (settings, data) {

                    var cookieName = prefix + '_tabledata';
                    var currentTableState = data;
                    createCookie(cookieName, JSON.stringify(currentTableState));

                },
                stateLoadCallback: function (settings, callback) {
                    var cookieName = prefix + '_tabledata';
                    var tableState = readCookie(cookieName);
                    tableState = JSON.parse(tableState);
                    return tableState;
                }
            });
            document.getElementById("filterSwitch").innerHTML = 'ON';
            console.log('Turn ON');
            
        } else {
            var table = $('#doc_table').DataTable();
            table.destroy();
            document.getElementById("filterSwitch").innerHTML = 'OFF' ;
            console.log('Turn OFF');
        }
    })

BTW:
In the end I did not use $.fn.DataTable.isDataTable, because I still get true after I destroy() the DT.

pedrono

(I am not sure, wether I should close this thread and create a new one with this question or not. If so, please tell me)

colin

I'd say it's fine here. The reason where you still get true for $.fn.DataTable.isDataTable is because I don't it's doing what you expect - destroy destroys and then recreated the table, so it will always be present. If you really want it gone, use the destroy().

I don't know about the IE11 issue, hopefully someone else could comment on that.

C

pedrono

I solved the IE11 issue.
I have used $.fn.dataTable.defaults (without being really necessary).
After I have removed it and put the settings in the normal DT initialization, also IE keeps quiet .

$('#filterSwitch').click(function() {

        if( $.fn.DataTable.isDataTable('#doc_table') == false){
            $('#doc_table').dataTable({
  
             DT Settings...
            });
            document.getElementById("filterSwitch").innerHTML = 'ON';;
            console.log('Turn ON')
            
        } else {
            var table = $('#doc_table').DataTable();
            table.destroy();
            document.getElementById("filterSwitch").innerHTML = 'OFF'; 
            console.log('Turn OFF')
        }

    })

Thanks again for the great support
pedrono

colin

You're welcome, glad it's all up and running

C