UI Tabs Loading the entire current page's code inside the tab div.
I am implementing tabs in a CMS system that insists on adding "/" to
the beginning of all href attributes that it did not generate.
I have these three tabs ( notice the preceeding / ):
<ul>
<li><a href="/#newstab"><span>News</span></a></li>
<li><a href="/#articlestab"><span>Articles</span></a></li>
<li><a href="/#pressreleasetab"><span>Press Releases</span></a></li>
</ul>
When the tabs are generated it loads the entire page you are on in a
div after the tab list through what I assume is an AJAX call.
I noticed this portion of code in the UI script and it sounds like it
may be what is supposed to solve problems like mine but it doesn't.
var fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash
this.anchors.each(function(i, a) {
var href = $(a).attr('href');
// For dynamically created HTML that contains a hash as href IE < 8
expands
// such href to the full page url with hash and then misinterprets
tab as ajax.
// Same consideration applies for an added tab with a fragment
identifier
// since a[href=#fragment-identifier] does unexpectedly not match.
// Thus normalize href attribute...
var hrefBase = href.split('#')[0], baseEl;
if (hrefBase && (hrefBase === location.toString().split('#')[0] ||
(baseEl = $('base')[0]) && hrefBase === baseEl.href)) {
href = a.hash;
a.href = href;
}
Is this a known bug and is there a way to get around this?