• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

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

javier94

Member
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
 
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.
PHP:
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
 
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
 
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:
JavaScript:
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.
 
Last edited:
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
 
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
 
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
 
Thank you Javier,

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

Bravo!
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top