Question

I have developed an iframe for a web dashboard for our charitable org which is giving me some issues with the jQuery UI.

On the actual iframe, the tabs and accordian are not functioning as intended. At the top of the page, you’ll see a couple but you can’t actually change from one to the other.
http://www.thegaiaproject.ca/charts/realtime-iframe.php?location=18

The strange thing is that as soon as the iframe is loaded inside of our drupal site, the iframe functions perfectly.
http://www.thegaiaproject.ca/data/realtime-test?location=18

Unfortunately, the same can not be said when the iframe is loaded on another organizations WordPress site.

Any ideas? I’ve been trying to debug this for hours. I’ve already tried loading in all the external scripts that drupal calls one-by-one to see if one of them was necessary – but that hasn’t helped me.

Answer 1

The problem is that the page requires itself being in an iframe. I noticed that each time a tab is selected, it calls the following function:

function sizeFrame() {
    var F = window.parent.document.getElementById("realtime-dashboard");
    if(F.contentDocument) {
        F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
    } 
    else {
        F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
    }       
}

Upon executing this function, it’s looking for a parent document (of which there is none) and throwing the error F is null for me (in Firefox’s Error Console), and subsequently tripping up the rest of the javascript.

Try slapping a test-for-null if statement into that function that handles the iframe’s non-existence, and I suspect it’ll cause the rest of your page to work as intended.

Hope it helps.