Show/hide multiple elements with same events

[aksmith]

Hello:
I am hoping there is a custom javascript method for showing/hiding multiple elements. The default actions option works fine, but it is quite tedious to set up (I am have to set show/hide rules for approximately 136+ elements).
Thanks,
Alan

 

[rob]

you can show/hide groups - might that be a work around.
Otherwise you may need to write a custom change events in JS to get what you need.

 

[aksmith]

Yup, I know about groups. In this case, there are select elements that I want to show/hide within the group itself based on a radio button toggle.
If you can show me an example of the correct syntax, I can take it from there.
Maybe one approach would be to create an array and then show/hide, either by simply listing the element names as a js array or something along this line:

var cachemoi = $('groupX').getElements('select[name*=tablename___elementname]');

 

[rob]

OK, so first of all you are going to need to update from github as I found a bug in the way radio buttons handle events.

Once you have done that, lets say your form's ID is '1'

Create a file: components/com_fabrik/js/form_1.js

Paste in something like this:

requirejs(['fab/fabrik'], function () {
  var form = Fabrik.getBlock('form_1', false, function (block) {
 
  // Create an array of the fields we want to show hide, these are the full element names
    var fieldNames = ['element_test___list', 'element_test___test'];
    var fields = [];
    for (var i = 0; i < fieldNames.length; i ++) {
      fields.push(block.elements.get(fieldNames[i]));
    }
 
    // This is the radio button which we will toggle on (i'm presuming a value of 0 hides the fields and a value of 1 shows the fields)
    var rad = block.elements.get('element_test___rad');
 
    // It could be that the radio buttons default state means we need to hide the fields.
    if (rad.get('value') == 0) {
      toggle(fields, false);
    }
 
   // Add a click event to the radio buttons to toggle the show/hide state.
    rad.addEvent('click', function () {
      state = rad.get('value') == 0 ? false : true;
      toggle(fields, state);
    });
 
  });
});
 
// Our toggle function
var toggle = function (fields, show) {
    for (var i = 0; i < fields.length; i ++) {
      if (show) {
        fields[i].show();
      } else {
        fields[i].hide();
      }
    }
}

Save and test your form.

FYI, Theres a wiki page explaining the best way to use Fabrik's JS Api for elements

 

[aksmith]

Thank you very much - I'll report back as soon as I have had a chance to implement.
I have checked out the wiki js pages - they are very helpful.
Cheers!