• 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.

Multiselect Dropdown Element Javascript Contains not working

Sounds like a bug 2me.
Until it can be fixed you can use this instead.
Just replace fabrik_list_name___element_to_hide with the id (element___name) of the element you want to hide - and change value_to_check to the selected option value that you want to match in order to trigger the hide.
Code:
var dbj_element = document.getElementById(this.baseElementId);
var hide_element = document.getElementById("fabrik_list_name___element_to_hide");
var hideElement = false;
for (var i = 0; i < dbj_element.length; i++) {
  if (dbj_element.options[i].selected && dbj_element.options[i].value=="value_to_check") hideElement = true;
}
if(hideElement) {
  hide_element.parentNode.parentNode.hide();
}else{
  hide_element.parentNode.parentNode.show();
}

Depending on the type of element you are hiding, that code might have to be changed - it all depends on how the container holding the element (and element label) is nested in relation to the element (i.e. the parentNode nesting part).

Using jQuery - you won't have to worry about that. So you can use this instead...
Code:
var selectedOpts = jQuery("#" + this.baseElementId ).val();
if(jQuery.inArray( "value_to_check", selectedOpts ) == -1 ){
  jQuery("#fabrik_list_name___element_to_hide").closest("div.fabrikElementContainer").show();
}else{
  jQuery("#fabrik_list_name___element_to_hide").closest("div.fabrikElementContainer").hide();
}

You also have to worry about the initial show/hide condition. So you may need to make 2 element javascript entries - on for on load and one for on change.

It's been my experience that when using jQuery, the on load event will accept 'this' as the current object - but it doesn't for any event after that (go figure).
So in a load event the first line would be
Code:
var selectedOpts = jQuery(this).val();
 
Edit the multi-select element. In the JavaScript option create a new 'Load' event and add the code where it says: Write your own Javascript code ...
 
Thanks Baur, tried both options, neither seems to affect the target element at all. I did change the element names and value as specified.

Any further thoughts?
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top