Resize datatable height in iframe when using widget

TriangleRocks

Utter and complete novice to Datatables and jQuery...but I gotta maintain app, so please bear with my ignorance.

I have a data table in an iframe. When the user uses the widget (I have no idea what the official name of this widget is) that allows the user to select the number of rows to display, I want to resize that iframe to fit based on the number of rows selected.

Code that fires when I select a new table size from the widget:

$('#matchingPersonsTable').on('length.dt', function (e, settings, len) {
    console.log('New page length: ' + len);
    parent.iframeLoaded('matchQueue');
});

The source for the iframeLoaded method:

function iframeLoaded(elementId) {
    console.log('In iframeLoaded')
    var iFrameID = document.getElementById(elementId);
    if (iFrameID) {
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 25 + "px";
    }   
}       

It appears that the method for resizing the iframe is being called before the data table finishes its resize, as the first time I select the resize widget the table changes size but the iframe does not....but if I choose a smaller size a second time, the iframe DOES resize. If I then choose the size I originally chose, it fits perfectly.

What am I doing wrong???

Second question....when the function to resize the iframe gets called, once all the javascript has completed, I get the following error in Chrome's dev tools console:

jquery-2.0.3.min.js:4 Uncaught TypeError: e.getAttribute is not a function
    at Function.ot.attr (jquery-2.0.3.min.js:4)
    at Array.<anonymous> (jquery-2.0.3.min.js:4)
    at jquery-2.0.3.min.js:4
    at a (jquery-2.0.3.min.js:4)
    at kt (jquery-2.0.3.min.js:4)
    at Function.ot [as find] (jquery-2.0.3.min.js:4)
    at HTMLDocument.handlers (jquery-2.0.3.min.js:5)
    at HTMLDocument.dispatch (jquery-2.0.3.min.js:5)
    at HTMLDocument.y.handle (jquery-2.0.3.min.js:5)
    at Object.trigger (jquery-2.0.3.min.js:5)

What is up with this?!?!

kthorngren

It appears that the method for resizing the iframe is being called before the data table finishes

If you are using ajax to request the data thats probably true since ajax is an async process to not stop other page activity. You will probably want to put your resize function in the draw event. That way it executes once Datatables is done drawing the table.

Uncaught TypeError: e.getAttribute is not a function

Hard to say without being able to see that page in action. Likely due to some issue happening within your Javascript. Maybe moving the resize function will resolve the error.

Kevin