Jump to content
Latest News: (loading..)

Archived

This topic is now archived and is closed to further replies.

dreaminggates

Help please with JQuery-UI Tabs and product_info.php

Recommended Posts

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>

Share this post


Link to post
Share on other sites

@@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


See my profile for a list of my addons and ways to get support.

Share this post


Link to post
Share on other sites

×