HillbillyTabs 3.0 in SharePoint 2013 Select Box Bug

Question

I've got Hillbilly Tabs working great in my on-prem 2013 environment. The only issue I'm running into is with selecting items or documents in the web parts when they are inside tabs. This seems to be a known bug and I wanted to see if the StackExchange community had any insight.

The normal functionality in a web part allows a user to select many items at random and then perform an operation from the ribbon, like delete or check-in. When the web parts are inside tabs, the functionality is buggy. For example, I select 2 items and then when the 3rd item is selected, the other 2 are arbitrarily deselected. Very strange behavior. Has anyone else run into this and found a fix?

I also tried using App Parts instead of web parts and different page layouts, all with the same result. When I remove them from tabs, they function as expected and I can select any number of items without any others deselecting. Select all items works in all cases. I've tried 3 different versions of JQuery, with and without JQueryUI, and custom themed JQuery UI, all with the same bugginess.

On the Author's website, someone asked the same question.

Prabha Poulose on December 17, 2015 at 3:39 pm said:

Hello Mrackley, We are using the Hillbilly tabs on our SP2013 pages and it is very nice. The only thing we found is not able to do multiple selections of items on the web parts within the tabs. If I select more than two items, all items get deselected and only the last clicked item will be selected.

I was searching the if there is any workaround for this and didn’t find any solution. Will you be able to shed some light on these issue.

And the response.

mrackley on December 17, 2015 at 3:42 pm said:

this is a known limitation of the solution, I have not had the time to determine if a workaround is possible.

Any suggestions or advice is much appreciated!

Answer 1

From the look of it's not an easy fix, I have not used that script before, but a quick test shows it's a problem with the ribbon. Probably losing some context at some point. And what it does then is to call the DeselectAllWPItems function.

Tbh SP.Ribbon.js is way to complicated to worth trying to override for this script. Probably best to write a better script for managing tabs for webparts.

A poor half fix could be to override the DeselectAllWPItems function, still it wont work 100%, the Ribbon context will swith on and off, you'll notice you lose the List/Library tabs.

<script type="text/javascript">
     jQuery(document).ready(function($) { 
        HillbillyTabs();
        SP.SOD.executeOrDelayUntilScriptLoaded(function() {
            window.DeselectAllWPItems = function() {};
        }, 'sp.ribbon.js');

    });
</script>

Answer 2

I have used it in one of my project & it is working like a charm with 3 listview WebParts in each tab.

Please check this link if you failed to follow any of the step from this.

Answer 3

Replace this code in Hillbilly Tabs,

$("#tabsContainer").attr("id",tabDivID).append("<ul id='"+ulID+"'></ul>");

to below.

var parentObj = $("#tabsContainer").closest("[id^='MSOZoneCell_WebPart']").parent(); parentObj.attr("id",tabDivID); parentObj.prepend("<ul id='"+ulID+"'></ul>"); $("#tabsContainer").attr("id",tabDivID).append("<ul id='"+ulID+"dummy'></ul>");

Answer 4

You can fix the issue by updating to the 4.0 version and modify the code.

Follow the instructions in the following link to set up the 4.0 version http://www.markrackley.net/2018/04/08/the-return-of-hillbillytabs-part-4/

Then all you need to do is replace the

$("#tabsContainer").attr("id",tabDivID).append("<ul id='"+ulID+"'></ul>");

with

var parentObj = $("#tabsContainer").closest("[id^='MSOZoneCell_WebPart']").parent();
parentObj.attr("id",tabDivID);
parentObj.prepend("<ul id='"+ulID+"'></ul>");
$("#tabsContainer").attr("id",tabDivID).append("<ul id='"+ulID+"dummy'></ul>");

You can either use the content editor or just simply paste the code to the script editor.