Passing "href" as data in jQuery UI tabs() through Ajax - ajax

Question

I have some tabs (jQuery UI tabs) in the "index.php" of a page. This page not only shows content, but also retrieves the $_GET variable to show some other content below the tabs.
The problem is how to tell jQuery UI that the href (attr of the clicked ) is a value for the key "href" that has to send (GET) to the current index.php page, called in JS has window.location.pathname (I can't use PHP generated JavaScript).
The code is this, and i'm out of options for how to make things work.
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: window.location.pathname,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
The HTML:
<div id="front-tab">
<ul>
<li><span>Home</span></li>
<li><span>Tab Content 1</span></li>
<li><span>Tab Content 2</span></li>
<li><span>Tab Content 3</span></li>
<li><span>Tab Content 4</span></li>
</ul>
<div id="tab-home">
content...
</div>
</div>
Yep, this gets me full of "I HAZ FAIL" every time I try to load other tabs. The first tab is inline HTML, but the rest is Ajax. url: window.location.pathname doesn't seems to work or point to the right direction. Well, I don't know if that does what I am looking for.

Answer 1

function initTabs(elementHref) {
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: elementHref,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
}
jQuery('yourLink').on('click', function() {
initTabs(jQuery(this).attr('href'));
});

Answer 2

Well, after noting the inflexibility of jQuery UI Tabs I had to replicate the action on my own. Better yet, few lines of code compared to two plugins.
front_tab.click(function(e) {
// Content parent
tab_content = $('#tab-content');
// other variables
var tab_visible = tab_content.children('div.visible'),
span = $(this).children('span'),
span_value = span.html(),
value = $(this).attr('href'),
// This gets our target div (if exists)
target = tab_content.children(value);
// There is no anchor
e.preventDefault();
// Don't do nothing if we are animating or "ajaxing"
if (tab_content.children().is(':animated') || is_ajaxing) { return; };
// Put the "selected" style to the clicked tab
if (!$(this).hasClass('selected')) {
front_tab.removeClass('selected');
$(this).addClass('selected');
}
// If is target div, call it
if (target.length > 0) {
is_ajaxing = true;
span.html('Loading...');
tab_content.children().removeAttr('class');
tab_visible.slideUp('slow', 'swing', function(){
// Some timeout to slow down the animation
setTimeout(function() {
target.attr('class', 'visible').slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 400);
});
// So, the target div doesn't exists. We have to call it.
} else {
is_ajaxing = true;
span.html('Cargando...');
$.get(
window.location.pathname,
{ href : value },
function(data) {
tab_visible.slideUp('slow', 'swing', function(){
setTimeout(function() {
tab_content.children().removeAttr('class');
tab_content
.append(unescape(data))
.children(value)
.css('display', 'none')
.attr('class', 'visible')
.slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 800);
});
},
'html');
}
});
The next problem is to make a nice error warning, but that is the solution.