How do I show/hide groups based on a drop down selection?

[chattwo]

Hi,
I use the last SVN and The last Version of Fabrik.
As Hugh mentionned, withe the last fabrik version we don't need to code any javascript, just choosing javatab-change-show-groupe_name-==-value number. it's all.
It works fine for me.
Thanks to all Fabrik staff for the help they give for us.

 

[Greenrent]

Nice post...Thank you very much!!......

 

[Emekas]

So if I have a drop-down element.
Value Lable
0 Choose an option
1 Send a message
2 Deny a invoice
3 Inform about something
4 Order a towing

Under the JavaScript I only choose:
--do-- --that-- when this --is-- [ ]
Show Message (group) when this == 1

This should show my "Message" group.

So this should work, right? The problem is that when I "Save" or "Apply" this, the JS setting just vanish... "poff" and it's gone... Do I need to do a SVN update or something? I downloaded my Fabrik from fabrikar.com 2 weeks ago...

 

[cheesegrits]

You also need to select an action, like 'change'.

And yes, we'd suggest grabbing the latest SVN. If I recall, we put in some code since the last ZIP to warn you about selecting an action on JS events.

-- hugh

 

[Emekas]

It works like a charm! Thanks cheesegrits!

 

[grochap]

Trying to get it working yet...

Hi Folks,

I just downloaded and instaled the last version of Fabrik in a website that I'm creating. I created a dropdown element with 10 options.

value - Label
0 - Select
1 - Retired
2 - INSS Retired
3 - Army
4 - Mariner
5 - Aerial Force
6 - Public Employer
7 - etc..
8 - etc...
9 - etc...

Also I created one group per each drop down element, with at least one element (text field) inside, and seted-up it as "hidden". That should appear based on the drop down selection.

OK!

So I need to show up these hidden elements when the user select one of these drop-down option. Let's go...

I just did try to use: (selected "change" in JS action
--do-- --that-- when this --is-- [ ]
Show Retired (group) when this == 1

But the form still without any change.
What I can doing wrong.

My form is published here:
http://ifexcred.com.br/index.php?op...rik=2&random=0&fabriklayout=default&Itemid=58


Thanks a lot by this great Joomla Extension.

Guilherme

 

[Emekas]

When using the JS in a dropdown, the valuefield in the JavaScript has to be the same as the value in the dropdown.

You are using: Show Retired(group) when this == 1 but there is no "1" in the dropdown value list. So either you should set it to Show Retired(group) when this == Aposentado or you change the value of eg Aposentado INSS to 1.

A tip: Don't forget to have a Hide Retired When this != 1 to make sure that the goup is hiding again in case the person filling the form desides to choose another value.

I'm no good in explaining so I hope I made sense.

 

[grochap]

Hello

First of all,


thanks for your quick answer.

Yes, I already did it. Like you can see in the new attached.

But still with no changes when select any item in drop down.


Any other idea?


some plugin to configure, some extra JS code, etc... ?



Thanks once more.


Guilherme

 

[Emekas]

Hi!

You're welcome.

Unfortually I'm a amature on this so that was my best guess. All I can think of is to check that the elements in the groups you want to show is published? Is the element you want to show in the group "public"?

And also maby check if you have the latest SVN etc..

I don't think you have to add any code to the JS, at least I didn't have to.

But I do think we have to turn to the professionals here...

 

[K2Joom]

I am using the JS code, posted at the top of this and modified accordingly.

The following is the code used in the JS field in my dropdown element called product_type.
This is published and event type is set to changed.

//get the current value of the product_type drop down
var v = this.getValue();

// this is our object that maps the product_type drop down values (1 & 2) to the group html ids. Note 0 = Please Select so do not use
var groups = {
1:'group27',
2:'group29'
};

//get the html id of the group to show
var groupToShow = groups[v];

//loop over all the groups we defined in the object 'groups'
for (var i in groups ){
//if the current group is the one to show - show it
if(groups == groupToShow){
$( groups ).show();
}else{
//otherwise hide it
$( groups ).hide();
}
}

Both of the Groups 27 and 29 are set to Show Group = Yes but hidden on the Layout tab.
When the form loads, Group 27 & 29 are not visible but I can see the HTML in code inspector.
When option 1 or 2 are selected, neither group are displayed.

Can you give me a nudge in the right direction as to what I am doing wrong please.

I am using version 3.4.2 on J!3.4.8