CODEWITHSUNDEEP
jqueryjquery-ui-tabs
Cedric
Cedric

Reputation: 11

JQuery UI tabs 1.10.0 activate is not called after creation

I have been searching a while on the web and couldn't find an answer. While upgrading from JQuery UI 1.9.2 to 1.10.0, everything went smoothly except for tabs. I had the 'show' options setup in 1.9.2 and replaced it with 'active' and 'activate'. The point is that right after creating the tab, the 'activate' function is not called. How can I solve that? (I tried to use the 'create' event but how to call the 'activate' event from 'create'?

Thank you.

<html>
<head>
    <link href="/css/styles.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/base/jquery.ui.all.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/Cupertino/jquery-ui.css" rel='stylesheet' type='text/css'></link>
    <script src='/js/jquery-1.9.1.min.js' rel='text/javascript'></script>
    <script src='/js/jquery-ui-1.10.0.custom.js' rel='text/javascript'></script>
    <script src='/js/jquery.cookie.js' rel='text/javascript'></script>
    <script src='/js/jquery.browser.js' rel='text/javascript'></script>
    <script src='/js/jquery.iframe-auto-height.1.9.1.js' rel='text/javascript'></script>
</head>
<body class='ui-widget-content'>
    <div id='tabber'>
        <ul>
            <li>
                <a href="#tabber-00">General information</a>
            </li>
            <li>
                <a href="#tabber-01" url='.page.php'>Remote page</a>
            </li>
        </ul>
        <div id='tabber-00'>
            <p>Some content here</p>
        </div>
        <div id='tabber-01'></div>
    </div>
</body>
<script type='text/javascript'>
    $(function() {
        $('#tabber').tabs({
        ajaxOptions:{cache:false},
        active: ($.cookie('tabber') || 0 ),
        activate:function(event,ui) {
                      var tab = ui.newTab.find('a').attr('href');
                      var url=ui.newTab.find('a').attr('url');
                      if( url != null ) {
                        var html=[];
                        html.push('<iframe width="100%" height="auto" frameborder="0" margin="0" src="' + url + '">Load Failed?</iframe>');
                        $(tab).empty();
                        $(tab).append( html.join('') ); 
                        $(tab).find('iframe').iframeAutoHeight({minHeight:400});
                      }
                      alert('activate');
                      var index = ui.newTab.parent().children().index(ui.newTab);
                      $.cookie('tabber_user_info', index, { expires:999 } )
                     },
        });
    });
</script>
</html>

My main issue is that I work with iframe and want dynamically be able to load the iframe when the page is activated.

Upvotes: 0

Views: 1576

Answers (1)

Cedric
Cedric

Reputation: 11

I finally got the solution. I had a 'loadTab()' function and use the 'create' and 'activate' events. The loadTab() function creates a iframe and resize it according to its content.

I am using the following plugins:

  • jquery.cookie.js
  • jquery.browser.js
  • jquery.iframe-auto-height.js

Thanks.

<html>

<title></title>
<head>

    <link href="/css/styles.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/base/jquery.ui.all.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/Cupertino/jquery-ui.css" rel='stylesheet' type='text/css'></link>
    <script src='/js/jquery-1.9.1.min.js' rel='text/javascript'></script>
    <script src='/js/jquery-ui-1.10.0.custom.js' rel='text/javascript'></script>
    <script src='/js/jquery.cookie.js' rel='text/javascript'></script>
    <script src='/js/jquery.browser.js' rel='text/javascript'></script>
    <script src='/js/jquery.iframe-auto-height.1.9.1.js' rel='text/javascript'></script>
</head>
<body class='ui-widget-content'>

    <div id='tabber'>
        <ul>
            <li>
                <a href="#tabber-00">Tab 1</a>
            </li>
            <li>
                <a href="#tabber-01" url="page.php">Tab 2</a>
            </li>
        </ul>
        <div id='tabber-00'>
            <p>Some Text</p>
        </div>
        <div id='tabber-01'></div>
    </div>
</body>
<script type='text/javascript'>
    $(function() {
        function loadTab(tab) { var href = tab.find('a').attr('href'); var url = tab.find('a').attr('url'); if( url != null ) { $(href).empty(); $(href).append( '<iframe width="100%" height="auto" frameborder="0" margin="0" src="' + url + '">Load Failed?</iframe>' ); $(href).find('iframe').iframeAutoHeight({minHeight:400}); } }
        $('#tabber').tabs({
        ajaxOptions:{cache:false},
        active:($.cookie('tabber') || 0 ),
        activate:function(event,ui) { loadTab(ui.newTab); var index = ui.newTab.parent().children().index(ui.newTab); $.cookie('tabber', index, { expires:999 } ) },
        create:function(event,ui) { loadTab(ui.tab); },
        });

    });
</script>
</html>

Upvotes: 1

Related Questions