jQuery ui tabs load/tabsload event does not fire

Question

This seems to be the same as my question: jquery ui tabs load event does not fire

but the solution provided doesn't work for me.

my code:

<script type="text/javascript">

    $(document).ready(function(){

        $( "#tabs" ).bind( "tabsload", function(event, ui) {
            alert("ok");
            changeheight();
        });
        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

function changeheight(){
    alert("changeheight");
    var iframe = document.getElementById("#iframe1");
    var htmlheight = iframe.contentWindow.document.body.scrollHeight;
    alert(htmlheight);
    $("#iframe1").height(htmlheight+"px");
}

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;">
        </iframe>

As you can see, I'm trying it both ways, but neither is working.

Answer 1

The load handler is only for tabs that are loaded via ajax. To do what you want to do, you'll need to attach a load handler to the iframe element:

<script type="text/javascript">

    $(document).ready(function(){
        $('#iframe1').load(function() {
          alert("ok");
          changeheight();
        });

        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

    function changeheight(){
        alert("changeheight");
        var iframe = document.getElementById("#iframe1");
        var htmlheight = iframe.contentWindow.document.body.scrollHeight;
        alert(htmlheight);
        $("#iframe1").height(htmlheight+"px");
    }

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;"></iframe>
</div>

Note however that your iframe might load before someone has the chance to click on the tab. That may be what you want. If you want to just trigger something when a tab is selected, use the tabsselect event:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});