Jquery tabs loads current url in tab

Question

Using jQuery's UI Tabs. This is my code.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Find a Category</a></li>
    <li><a href="#tabs-2">Business Name</a></li>
    <li><a href="#tabs-3">All Categories</a></li>
    <li><a href="#tabs-4">Business to Business</a></li>
  </ul>
  <div style="clear:both;"></div>
  <div id="tabs-1"><p>Tab 1</p></div>
    <div id="tabs-2"><p>Tab 2</p></div>
    <div id="tabs-3"><p>Tab 3</p></div>
    <div id="tabs-4"><p>Tab 4</p></div>
    </div>
</div>

Initiating like this...

$(function() {
    $('#tabs').tabs();
});

On some pages of my site it works perfectly. On other pages, the href="#tabs-x" is prepended with the path of the page, e.g. <a href="#tabs-1">Find a Category</a> becomes <a href="/page/path/#tabs-1">Find a Category</a> (in this case the page would be found at /page/path/.) When this happens it thinks it needs to use Ajax and ends up reloading the page into the tab.

The really odd thing is that it doesn't happen on every page (though it does happen on most of them). For example

http://cbpstage.eblairsolutions.net/online/all-categories/ - works great http://cbpstage.eblairsolutions.net/online/business-to-business/ - fails.

I have validated the pages (they are not perfect but fail in exactly the same ways). I've compared them using IDM's ultracompare. They are different pages so there are some differences, but nothing material that I can detect that is causing the href to behave differently.

I've spent all day on this and only have a balding head to show for it. Would love someone else to look at this.

Answer 1

My initial gut reaction is that you're building your tab DIV on the fly. I don't know the back-end language/platform, but in ASP.NET, you can do something like this when you build your URL references:

~/#tab-1

and the ~ will be interpreted as resolving to the root directory. So if your actual page (not your route) is a few levels deep, that ~ will append on the few levels to that HREF.

I'm not saying that's what happening exactly, but that's what seems to be going on. Investigate how your tabs DIV is being built, how are you adding the href's to your <a> tags, and go from there. If you can update your question with some of this information, I'll update my answer accordingly.

Hope this helps!

Answer 2

D Hoerster is on the right track. The path seems to come from the server. Either you track it down, or you could add the following jQuery before your $('#tabs').tabs(... declaration:

$('#tabs a').each(function(){
  $(this).attr('href',"#"+$(this).attr('href').split('#')[1]);
});

Edit: Added "#"+