has this JS changed between F3 and F3.1 using bootstrap

[p38]

I used this syntax in F3.0 with J2.5, but it does not seem to work in F3.1 with J3.1

hide tabs

  document.getElementById('group45_tab').style.display = 'none';

show tabs

  document.getElementById('group45_tab').style.display = 'block';

 

[rob]

which tabs? If you are on Joomla 3.x then the tabs code i believe is using bootstrap - so you should most likely use their method :

http://getbootstrap.com/2.3.2/javascript.html#tabs

 

[p38]

I tried this, but none work

  document.getElementById('group45_tab').style.display = 'data-toggle="none"';   //to hide
 
  document.getElementById('group45_tab').style.display = 'data-toggle="tab"';    //to show

Paul

 

[rob]

that doesn't look like what they tell you to use on the page I linked to:

Methods$().tab
Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<script>
$(function(){
$('#myTab a:last').tab('show');
})
</script>

 

[p38]

my question still remains, how do you reference the Group name on the tab?

eg: My Group ID is 45.

So where in

$('#myTab a:last').tab('show');

do you refence group tab no 45?

Does #myTab become #group45_tab as per the old f3.0 way?

 

[Sophist]

Can you point me to the page so I can look at the HTML? Alternatively have you tried looking at the HTML yourself to find the class or id used?

 

[cheesegrits]

You never answered Rob's question about "which tabs"? We use tabs in quite a few places. Are you talking about the tabs in the 'tab' form template?

-- hugh

 

[p38]

Using the bootstrap_tabs template for forms, which is supplied with fabrik.

I will have many F3.0 sites that I need to upgrade in the near future, all using Tabs template for forms, and many I use Js to switch visible/invisible based on element values.

Due to the new bootstrap of F3.1rc1, much of the custom code that worked in F3.0 does not work in F3.1rc1, so is a painstaking process to get it to work, the tabs in forms being one of them

Here is an example.......

Paul

 

[cheesegrits]

It's not really a "Fabrik thing", it's a Joomla thing, as they've moved to Bootstrap for templating, so we don't have much choice but to follow along.

Looking at your page, I can see that this would currently be rather clumsy. Do-able, as you can get the ID of the tab content your group is in by doing ...

>>> document.id('group45').getParent().id
"group-tab2"

... but then you have to use that to get at the tab item itself, in the UL preceding the content DIV, by some magic incantation to match the anchor href ... which is where my JS fu runs out, as it means using a variable to produce something like document.getElements('a[href="group-tab2"]')[0] to get your actual tab.
Rob - how about we provide a helper function to do this, as it's a common requirement, or at leats assign ID's to the tab structure?
-- hugh

 

[cheesegrits]

OK, I've added ID's to the anchor tag in the tabs, so they now have groupXX_tab as the ID you can use in the $('#groupXX_tab').show() and .hide().

-- hugh

 

[p38]

thanks I will give this a bash