Help please with JQuery-UI Tabs and product_info.php

[dreaminggates 0]

Hello everyone, I hope you are well.

 

I've been staring at this problem for 48 hours now. I hope someone smarter than I am can help me figure out what I am doing wrong. I know it's not something "simple" like a missing </div> or id tag.

 

I am TRYING to use a Jquery-UI "tabs" widget on the product information page (Product_info.php). Jquery and Jquery-UI are both running correctly (you can confirm this, if you wish, by visiting the sample page and seeing the hovertip which appears on the item's name).

 

My problem? The tabs are malfunctioning. They open the "index.php" page instead of the divs they are attached to. It's almost like the tabs are seeing no anchor at all, so opening the index.php by default.

 

Here is a sample page: http://shop.dreaminggates.com/product_info.php/containers-dram-glass-bottles-p-37#.UtoXUrROlF3

 

Here is the pertinent code:

 

 

<script>

$(function() {

$( "#tabs" ).tabs({

collapsible: true

});

});

</script>

 

... content ...

 

 

<div id="tabs">

<ul>

<li><a href="#tabs-1">Basics</a></li>

<li><a href="#tabs-2">Options</a></li>

<li><a href="#tabs-3">Related</a></li>

<li><a href="#tabs-4">Reviews</a></li>

<li><a href="#tabs-5">Share</a></li>

</ul>

 

<div id="tabs-1">

... content ...

</div>

<div id="tabs-2">

... content ...

</div>

<div id="tabs-3">

... content ...

</div>

<div id="tabs-4">

... content...

</div>

<div id="tabs-5">

... content...

</div>

</div>

[dreaminggates 0]

ETA - I gave up and installed another tab system. I just can't get the Jquery-UI tabs to work.

[♥kymation 631]

@@dreaminggates That's a known jQuery bug. The solution, or one solution anyway, is to add this code to the head section of template_top.php:

 

/<script type="text/javascript">
// fix jQuery base tag bug
$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
 var base = location.href.replace(/#.*$/, '');
 $('ul>li>a[href^="#"]', this).each(function () {
 var href = $(this).attr('href');
 $(this).attr('href', base + href);
 });
 $(this).__tabs(a, b, c, d, e, f);
};
</script>

 

I didn't write this code; I snagged it from the original bug report.

 

Regards

Jim

[dreaminggates 0]

@@kymation Oh thank you very much! I did not realize it was a bug. I appreciate the information :)