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

[javier94]

i have repeat a title post, because i read, and i'm trying to do, but somehting diferent.. maybe i have to change something, because this post is 2008.. not sure..

http://fabrikar.com/forums/index.ph...e-groups-based-on-a-drop-down-selection.6228/

i understand, that doing this, i will show all the elements inside of the group selected when i use the dropdown..

is that correct???

looking the older post.. i see.

"Show group" option set to "hide" - this hides the group when the form loads"

the options in Show group now are =
YES
Yes, but "hidden"
YES, but "hidden" (form only)
YES but "hidden" (details only)
only detail view
form view only
hide if not elements....
always show as lecture..
NO

So i have try.. with YES, but "hidden" ( not sure if this the appropiate )

In the older post says also

• Edit the "product" element
• select the "Javascript" tab and press "Add Javascript action to element"
• Select "onchange" for the Javascript action and enter this code in the javascript code window:

As an action in javascript i have "change" --> (not sure if is the same) i have check in plugins but i can not see "onchange" event or something like this.

The code use in my javascript is..

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

// this is our object that maps the product drop down values (1 & 2) to the group html ids
var groups = {
1:'group20',
2:'group35',
3:'group20',
4:'group20',
5:'group20'
};

//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();
}
}

I'm trying with the 2 group.. value.. the "ID group is 35"

when i open the form.. the group is not showed.(seems is ok) . but when i move the dropdown.. and make the second selection --> nothing appears... not error or message.. should appear all elements in group with id= 35 i suppose.. or not???

Any suggestion??

Thanks in advance

Javier

 

[bggann]

Okay - this is going to be a long post.
I've never show/hiden groups using javascript - but I show/hide elements all the time.

-> In my experience, you cannot set the element to "Hidden: YES" and then 'show it' using Java.
Every time I've tried to do that - it never "shows"

I suspect you do the same with groups.
Set the group to be shown "shown in form/details" as "Yes"
The set an action to "hide" the group on load.
Set a section action on "change" to hide/show it. (you can maybe use toggle())

Plus -
I think you have issues with how you are defining the groups.
-------------------------------

However, I do this a different way. I put the code in a form_x.js file and call that from the element - so it may be different.

var field_name = el.form.formElements.get('element___name');

would probably change to something like

var group_name = el.form.formGroups.get('group_name'); <----- This is pure guesswork - I don't know the syntax.

I'm also just showing/hiding elements, not groups so my code
All I do in my element code is call the function in the form_x.js to show/hide things

========================

Specifically example (for fields).

• Create a file called "form_x.js" where x is the form number.
• Put that file in components/com_fabrik/js
• Put your show/hide code in there.
• Call the function in that file from the controlling dropdown.

For example:
Here is code from "form_2.js" (form 2 on my system manages things for Firefighting aircraft called SEAT's.)
What this does is shows or hides fields based on if you enter a non-zero number of gallons of dropped fire retardant. (I'm only showing a small piece, I have lots of functions in this file).

form_2.js contains.

function hideRetardantFields(el) {
    // This function shows or hides retardant related fields based upon the number of gallons
    //    If 0 gallons is entered, then hide them and set them to 0.
    //    If non-zero gallons is entered, the show them.
   
     var gallons = el.getValue();
    var repeat = el.getRepeatNum();
    var marsh_funnel_time = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time_'+repeat);
    var refractometer_reading = el.form.formElements.get('daily_log_7_repeat___refractometer_reading_'+repeat);
    var retardant_cost_per_gallon = el.form.formElements.get('daily_log_7_repeat___retardant_cost_per_gallon_'+repeat);
    var retardant_cost = el.form.formElements.get('daily_log_7_repeat___retardant_cost_'+repeat);
    // The following fields are for spacing on showing/hiding
    var blank3 = el.form.formElements.get('daily_log_7_repeat___blank3_'+repeat);
    var blank3b = el.form.formElements.get('daily_log_7_repeat___blank3b_'+repeat);

    if (gallons == '0' || gallons == '') {
        marsh_funnel_time.hide();
        refractometer_reading.hide();
        retardant_cost_per_gallon.hide();
        retardant_cost.hide();
        blank3b.hide();
        blank3.hide();
       
        marsh_funnel_time.update('');
        retardant_cost_per_gallon.update('');
        retardant_cost_per_gallon.update('');
    }
    else {
        marsh_funnel_time.show();
        refractometer_reading.show();
        retardant_cost_per_gallon.show();
        retardant_cost.show();
        blank3b.show();
        blank3.show();
    }
}

In my "gallons" element there are 2 javascript actions.
Event: Load
Javascript: hideRetardantFields(this);

Event: Change
Javascript : hideRetardantFields(this);
----------
When the form loads, I call it and if gallons is 0, I hide the retardant fields.
If "gallons" changes, I call this to show or hide the fields.

But - the elements are not defined as "hidden" - they are visible then you hide them on load.

-Bob

 

[bggann]

Update:
I tested the idea of setting the group to
Show in form/Details to "Yes, but hidden"

The group is hidden on load and I can show it with a Javascript call from a field.

-> Note - I did this using the method of selection events and actions in the Javascript field - not using javascript code.

So- This makes me think that the way you are defining the groups in the hide/show code is wrong.

- Bob

 

[bggann]

Edited - using fabrik form access - bob
Okay javier.
In the javascript (talking about form_x.js)

var = group18 = el.form.formElements.get('group-name');
group18.hide(); // hides the group
group18.show();// shows the group
group18.toggle(); // toggles the state.

-------------------
In your case:

• Set each group to show in form/details: "Yes but hidden" so it is hidden on load.

In your "product" element add a Javascript event
Event "change"
Javascript code: hideMyGoups(this);

Create a form_x.js in directory components/com_fabrik/js
x - is your form number (the id in the list of forms)

In form_x.js:

function hideMyGroups(el) {
var product = el.getValue();
var = group18 = el.form.formElements.get('group-name');
// repeat this for all your groups
if (product = 'whatever you are using' ) {
group18.hide();
//repeat this for all your groups.
}
else {
group18.show();
}

When the form loads, the groups will be hidden
When you change "product" to some value that shows the group, the change even will fire and
hideMyGroups(el) in form_x.js will be called

The groups will show/hide based on the logic in the code.

 

[javier94]

first... BRAAAAAAVO.. for your post.. !!! Is nice to see people try to help other people.. Many thanks for that..

i will try and let see..

Many thanks!

Javier

 

[bggann]

Javier,

Did this work for you.
Today I'm trying to do it - using the exact same code structure I did above, and it is not working. In java debugger the group variable is "null"

I cannot figure out what I did differently.
- Bob

 

[javier94]

Hello Bob,

Yes, I use your code .. and it works for me..

i give you my code.. maybe will be easier to check what happen..

in the dropdown element.. i have 3 variables 0 (select) 1 (no) and 2 (yes)

I create inside the dropdown element --> 2 javascript actions... 1.- on load event 2.- change event.. in both cases the code is the same.. and only fill the event, and the code.. nothing else.

The code for ONLY ONE element is:

var my_dropdown_value = this.form.formElements.get('menu_dia_entrantes___image_dish_selector').getValue();

if(my_dropdown_value === "0") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
}

else if (my_dropdown_value === "1") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
}

else {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
}

=====

In my case i have 4 ELEMENTS -- INSIDE IN 4 DIFERENTS REPETEABLE GROUPS -- and the code is ;

var my_dropdown_value = this.form.formElements.get('menu_dia_entrantes___image_dish_selector').getValue();

if(my_dropdown_value === "0") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').show();
}

else if (my_dropdown_value === "1") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
jQuery('th[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').hide();
jQuery('th[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').hide();
jQuery('th[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').hide();
}

else {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3046_repeat___es_dish_image_primeros"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3047_repeat___es_dish_image_segundos"]').show();
jQuery('th[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3048_repeat___es_dish_image_postres"]').show();

}

===========
when i select the dropdown, not or yes, all 4 elements appear and dissapear in the form

Let see if can help you..

Thanks

Javier

 

[bggann]

Thank you Javier,

I think the JQeuery part is my issue. I will go back and look.

Bravo!