jQuery UI non ajax tab loading whole website into itself?

Question

Having a large problem with jQuery Tabs.

Im trying to load the tabs on my sites product page... When the page loads i see that tabs content for a second (standard html t

Answer 1

I am in no way JS programmer, more C++/C# on Windows, reached this post while helping a relative with his web site on Joomla, where he had a similar problem, but thanks to MVlink to bug item the solution is simple. Bottom line - you can't use "local" href= , so .. don't use them , for example for page mypage.html on server http://www.example.com the code instead of original:

<div id="productTabs">
    <ul>
        <li><a href="#tabDescription">Description</a></li>
        <li><a href="#tabSpecs">Specifications</a></li>
        <li><a href="#tabReviews">Reviews</a></li>
        <li><a href="#tabDownloads">Downloads</a></li>
    </ul>
    <div id="tabDescription">test</div>
    <div id="tabSpecs">test</div>
    <div id="tabReviews">test</div>
    <div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>

You should use:

<div id="productTabs">
    <ul>
        <li><a href="http://www.example.com/mypage.html#tabDescription">Description</a></li>
        <li><a href="http://www.example.com/mypage.html#tabSpecs">Specifications</a></li>
        <li><a href="http://www.example.com/mypage.html#tabReviews">Reviews</a></li>
        <li><a href="http://www.example.com/mypage.html#tabDownloads">Downloads</a></li>
    </ul>
    <div id="tabDescription">test</div>
    <div id="tabSpecs">test</div>
    <div id="tabReviews">test</div>
    <div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>

And everything will work just fine. Of course if you use some code generation , like PHP in Joomla it becomes even easier to put for example() echo JUri::getInstance() . '#tab<Name>' in code generation

Answer 2

As @MV mentioned, the problem is that jquery is confusing the base tag on top of my webpage. So instead of editing the jQuery ui file witch is not in my options, I simply removed the base tag using jQuery like that

<script>
    jQuery(function() {
        jQuery('base').remove();
        jQuery( "#tabs" ).tabs();                   
    });
</script>

This seems to work for me since I don't mind removing the base tag temporary for the sake of tabs control on that specific page. But I was also thinking a solution in case one needs those definitions, like collecting those base tags into an array, removing them and then after executing the tabs() method, add them again which looks a bit st..id but should work if tabs() is not implementing any listener pattern. I haven't tried it and I wont yet. Anyway It looks like jQuery ui has a bug there indeed!

Answer 3

Angelica had the answer that worked for me. I used this in a requirejs file for any page with the class 'tabs' as the selector for the tabs.

jQuery(".tabs ul li a").each(function() {
    jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href"));
});
jQuery(".tabs").tabs();

Answer 4

My Conclusion

var base=$('base').clone(true);

$("#selector").dialog({
    open: function( event, ui ) {
        $('base').remove(); //Delete the Basepath to solve the Problem by loading Content
        $('#tabs').tabs();//Create the Tabs   
    }
    close: function( event, ui ) {base.insertAfter("head");
});

Maybe look at this it can be very helpfull to remove the basepath, than create your tabs(), and when your works with tabs are finished you have to append back to head

Answer 5

This is a simple workaround that works inside your .js, so you can use a third-party copy for jquery.ui.
Tested with Jquery UI 1.10.2.
Resolve base meta tag problem and also the problem with the optional trailing slash n url.

$("#mytabs UL LI A").each(function() {
    $(this).attr("href", location.href.toString()+$(this).attr("href"));
});
$("#mytabs").tabs();

Answer 6

Messing with base attribute just to make tabs working. It's too much

Another hacky workaround:

element.tabs({
  create: function(event, ui){
    var tabsData = $(event.target).data('ui-tabs');
    tabsData.anchors.each(function(idx, anchor){
      var contentId = $(anchor).attr('href');
      var $panel = $(tabsData.panels[idx]);
      $panel.html($(contentId).remove().html());
    });
  },
  beforeLoad: function(event, ui){
    event.preventDefault();
  }
});

tested with jQuery UI - v1.11.1