bootstrap tabs doesn't hide group in details

[joit]

Hi,
I use the bootstrap tabs template for the details view. I have an element in the form which hides a certain group with javaScript.
Now although this group is hidden, the tab is still visible in details. If I use bootstrap instead, the group is not visible.

Any ideas?

Thanks
Hannes

 

[rob]

you will need to hide the tab as well with your javascript code. Remember the tab is rendered when the page is loaded, its not clever enough in itself to know that you have altered content and now need to remove it from the tabset.

 

[joit]

OK!
The problem for me is that I can hide groups and elements with the predefined actions but there are no tabs. Can you please give me a hint on how to hide tabs?

 

[cheesegrits]

Which form is this? It'll be easier if I give you the JS with the right id's etc in it.

-- hugh

 

[joit]

It is this one
150401/index.php/ladung-eingeben

Gesendet von meinem SM-G850F mit Tapatalk

 

[cheesegrits]

That one doesn't show as tabbed to me.

-- hugh

 

[joit]

That's ok, I just want to use bootstrab_tabs for the details view. For form view I like bootstrap with multi-pages groups.

 

[cheesegrits]

Yeah, but I still need to see a tabbed view of the details, so I can help with the JS you'll need.

And now, I can't even see that URL, I get a 404.

-- hugh

 

[joit]

hmm really...?
can you open this record?
150401/index.php/ladung/details/19/190
this is the details from the form
150401/index.php/ladung-eingeben
and there's definetly the bootstrap_tabs element

 

[cheesegrits]

Nope, neither.

http://screencast.com/t/BQHS9fmUE

Let me know when you've read this, I'll delete the screencast link.

-- hugh

 

[joit]

OK, I've read this now. The only thing I can think of is that my hosting provider has had a very bad moment...
Please try again, I double-checked both links and they work again.

 

[rob]

I can see the details view, but which element hides which group?

 

[rob]

in general your js would be for hiding the second tab in the details page:

jQuery('#details_19_190 ul.nav-tabs li:nth-child(1)').hide();

 

[joit]

I can see the details view, but which element hides which group?

It's element 448 (cargo_details)
with set to 8 it shoud hide group 72 and show groups 90, 94, 95 and 96
any other value should hide/show vice versa

 

[joit]

in general your js would be for hiding the second tab in the details page:

jQuery('#details_19_190 ul.nav-tabs li:nth-child(1)').hide();

Got it, thanks!
But how do I make the if statement?

 

[rob]

you could take the example code I posted in the thread regarding the slow js loading on mobile phones.

 

[joit]

ok,
the group showing/hiding with Javascript works. But this
jQuery('#details_19_190 ul.nav-tabs li:nth-child(1)').hide();
only seems to work for a single record.
How can I make this work for the details view of all records?

 

[cheesegrits]

Try ...

var formid = Fabrik.getBlock('details_19').block;
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(1)').hide();

-- hugh

 

[joit]

for some reason, it doesn't work...
This is what I do on load:

var formid = Fabrik.getBlock('details_19').block;

if (jQuery('#cargo___cargo_details').val() === '8') {
jQuery('#group90').show().removeClass('fabrikHide');
jQuery('#group94').show().removeClass('fabrikHide');
jQuery('#group95').show().removeClass('fabrikHide');
jQuery('#group96').show().removeClass('fabrikHide');
jQuery('#group72').hide().addClass('fabrikHide');
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(2)').hide();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(3)').show();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(4)').show();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(5)').show();
} else {
jQuery('#group90').hide().addClass('fabrikHide');
jQuery('#group94').hide().addClass('fabrikHide');
jQuery('#group95').hide().addClass('fabrikHide');
jQuery('#group96').hide().addClass('fabrikHide');
jQuery('#group72').show().removeClass('fabrikHide');
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(2)').show();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(3)').hide();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(4)').hide();
jQuery('#' + formid + ' ul.nav-tabs li:nth-child(5)').hide();
}

do you see any problem?

 

[cheesegrits]

Have you stepped through the code in the debugger to see what formid is being set to, and tried running the selectors by hand?

If you don't know how to do that, find me on Skype, I'll give you a 5 minute primer in using a Javascript debugger (like Chrome's devtools, or Firebug in FF).

-- hugh