anchor href is misunderstood as external link with <base> tag in jQuery UI tabs

Question

I'm working with jquery UI tabs. (jquery 1.11.1,jQuery ui 1.11.1)

I've the following <base> tag in head>:

<base href="http://mytestdomain.com/" />

Now when the page loads jquery UI makes two tabs out of my two <li>'s and then tries to load the content from base url via ajax. jQuery ui doesn't know that the href of anchors are not "external", but "local" hence fails to load the content.

My html:

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">some text1</a></li>
        <li><a href="#fragment-2">some text2</a></li>
    </ul>
    <div id="fragment-1"> 
      LOREM IPSUM1
    </div>
    <div id="fragment-2"> 
      LOREM IPSUM2
    </div>
 </div>

My javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $('#container-1').tabs();
    });    
</script>

Can someone help me please?

Answer 1

Because of your base tag: <base href="http://mytestdomain.com/" />

The links having segments will be interpreted like the following:

<a href="http://mytestdomain.com/#fragment-2">some text2</a>

That certainly won't work since it's pointing to a directory.

Modifying the href of the hyperlinks to include the remaining path till the file containing the segment will fix the issue.

For example:

<a href="index.html#fragment-2">some text2</a>

will be interpreted as

<a href="http://mytestdomain.com/index.html#fragment-2">some text2</a>

and jQuery-UI will find the element having id fragment-2 from index.html