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.
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;
}
}
});
Solution based by link class in tab
<ul class="">
<li class=""><a href="http://www.example.com/#tabs-1" rel="">Tab 1</a></li>
<li class="ajax-disabled"><a href="http://www.example.com/anotherpage.php#tabs-1">Tab 2</a></li>
</ul>
And JS:
$('#tabs').tabs({
select: function(event,ui) {
if($(ui.tab).hasClass('ajax-disable')){
window.location.href = ui.tab.href;
return false;
}
}
});
When user click on tab with class "ajax-disabled", then new page will be loaded.
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/">Tab 1</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/">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;
}
});
I know this is old, but I stumbled on this question as I was trying to solve roughly the same problem, and have come up with a different solution. From what I gather, you want the look and feel of the jQuery tabs, but you want to retain the default browser behaviour of the links in the tab launching other pages. I require similar functionality where I have pages for each tab, each page display the list of tabs, and I just want to link back and forth using the anchor element in the tab, I don't want the jQuery tab to do any Ajax etc.
The following has worked for me.
Given the following html:
<div id="tabs">
<ul>
<li><a href="Page1.html">Page 1</a></li>
<li><a href="Page2.html">Page 2</a></li>
<li><a href="Page3.html">Page 3</a></li>
<li><a href="Page4.html">Page 4</a></li>
</ul>
</div>
Here's the following javascript:
var sUrl = window.location.href;
var $tabs = $("#tabs");
$tabs.tabs({
beforeLoad: function (event, ui)
{
//Prevent the tab loading logic from executing
return false;
}
}).find("li a").each(function ()
{
var $tablink = $(this);
//Remove the click event, which will revert to the browser handling the click, not the jQuery tab javascript
$tablink.unbind('click');
//If the current page url contains the tab href then select it.
if (sUrl.toLowerCase().indexOf($tablink.attr("href").toLowerCase()) > -1)
{
//Get the index of the li element within the ol or ul element.
var index = $tablink.parent().index();
//Select the tab
$tabs.tabs('option', 'active', index);
}
});
$('#tabs').tabs({
beforeLoad: function( event, ui ) {
// Prevent the tab loading logic
return false;
},
create: function( event, ui ) {
$(ui.tab[0]).parent('ul').parent().find('[role="tabpanel"]:empty').remove();
$(ui.tab[0]).parent('ul').find('li').each(function () {
var href = $(this).find('a').attr('href');
$(this).find('a').parent('li').attr('aria-controls', href.replace(/#/, ''));
$(this).attr('aria-selected') === 'true' ? $(href).attr('role', 'tabpanel') : $(href).attr('role', 'tabpanel').hide();
});
}
});
You can create a tab with a normal link without javascript like this:
<div id="tabs">
<ul>
<li><a href="#one"><span>Anchor tab</span></a></li>
<li><a href="http://example.com/ajax"><span>Ajax tab</span></a></li>
<li class="noajax"><a></a><a href="http://example.com/no-ajax" class="ui-tabs-anchor"><span>Link tab</span></a></li>
<style>
.noajax a:first-child {
display: none;
}
</style>
</ul>
</div>
The third tab here will function as a normal link. Three parts make this work:
<a> at the start of the tab's <li>. JQueryUI will bind its ajax load function to it, leaving the second <a> to function as a normal link.a:first-child.<a> is given class="ui-tabs-anchor" so it receives the correct style treatment.