Jquery UI tabs disable AJAX functionality for some tabs

Question

Hello,

How is it possible to disable AJAX functionality for a tab or two when using jQuery UI tabs?

So after clicking the user is taken to an URI defined by the href attribute of a link. Right now, the default behaviour is that the content from the the external URI is loaded via AJAX.

Answer 1

Not sure why you need this as it defeats the purpose of a tabbed pane and the user may not be expecting a full window refresh however...

The tabs expose a select event which you can hook into. You could then use some logic (check if the link has a certain css class or if the url is a certain page etc) to decide if to follow the default ajax behaviour of actually follow the link in the browser.

$("#tabs").tabs({

        select: function(event,ui) {
            var url = $.data(ui.tab, 'load.tabs');

            if (url==='somepage'){
                //follow the link
                window.location.href=url;
                return false;
            }

        }
});​

Answer 2

I have solved this myself...

HTML:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/"&gt;Tab 1</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/"&gt;Tab 2</a></li>
</ul>

JS:

$('#tabs').tabs({
    select: function(event, ui) {
        var uri = ui.tab.rel;
        if( uri ) {
            location.href = uri;
            return false;
        }
        return true;
    }
});