Problems with hide()

[johnonorvic]

I have a form with several groups which are shown or hidden by JS triggered by button clicks. Once a group is shown, calling hide() for it does nothing. The debugger shows the group’s attributes[2] property to be style="display: block;" when shown and style=";display:none;" when hidden. A call to show() changes it to "display: block;", but a call to hide() has no effect.

Digging deeper, hide() makes a call to /media/com_fabrik/js/mootools-ext-js, line 137, where the code is:

hide: function (ha) {
    if (ha === undefined) {
        if (this.parentNode.dataset.modalContent === undefined
            && this.dataset.modalContent === undefined
            && Fabrik.bootstrapVersion('modal') >= 3) {
            return;
        }
        if (this.hasClass('mootools-noconflict')) {
            return this;
        }
    }
    mHide.apply(this, arguments);
},

If the hide() call has no parameter and the bootstrap version is higher than 2 (it is actually 5.1.3), no mHide.apply() call to change the visibility is made. In contrast, the code for the show() call is:

show: function (v) {
    if (this.hasClass('mootools-noconflict')) {
        return this;
    }
    mShow.apply(this, v);
},

which lacks the two tests and so works.

The site is converted from Fabrik3 and hide() had worked there, so I had a look at that. The code in mootools-ext-js is simpler, but the “Fabrik.bootstrapVersion('modal') >= 3” test is the same. In Fabrik4, the code to get the version is in /media/com_fabrik/js/fabrik.js at line 33 and returns 5.1.3 from pluginFn.Constructor.VERSION. In the Fabrik3 system, both pluginFn.VERSION and pluginFn.Constructor.VERSION are undefined, so the function returns the default of “2”, which passes the test in the hide function.

I do not know why hide() has the extra tests that show() lacks; presumably there was a reason they were included. It seems to me it either needs to be updated or removed. There are two ways I can get it to work, either by adding a random number as a parameter of the hide() call or modifying the test in mootools-ext-js to:

Fabrik.bootstrapVersion('modal') >= 6​

but do not know what ought to be done.

 

[troester]

What is your button JS code?

Hide/show as built-in element JS actions is working fine and it doesn't use mootools-ext.js hide/show

Mootools is outdated and you should not use it in custom JS.

 

[johnonorvic]

I have JS code in various places (e.g. in an element’s onLoad and in a button’s onClick) for switching visibility of both elements and groups. For the elements, I use;

Fabrik.getBlock('form_nn').elements.get(‘element name’).hide();​

as recommended in the Fabrik Wiki “Element Javascript (Advanced)” which works. For the groups, I use:

document.id('groupnn').hide();​

as recommended in the Fabrik Wiki “How do I ... Groups Advanced (+)” which fails. I am not intentionally using Mootools myself at all, it is only included by Fabrik.

Presumably calling the hide() method of an instance of an FbElement class is OK (although I find that makes a call to mootools-core.js) and that calling the hide() method of a DOM node is not. Should I change a group’s visibility by directly setting its attributes:style property or is there a better way to do it?

 

[troester]

Ok, I see.
No idea why this was added - and only added to hide().

The element hide() doesn't use mootools-ext

To force the group show/hide to use jQuery you can do
jQuery(document.id('groupnn')).hide();
jQuery(document.id('groupnn')).show();

 

[johnonorvic]

Thanks for the advice. I think I now understand a bit better what goes on and have been through all my code to tidy it up. The right things now show when they should, so thanks again.

 

[ontarget]

I think i have a similar issue
I am using .hide() in my form_1.js file
e.g

function tutorParticipant(el)
{
    var elParticipantTutor = el.form.formElements.get('aaa_participant_claim___participant_tutor');
    var elAgreedFee = el.form.formElements.get('aaa_participant_claim___agreed_fee');
    var elLectureFee  = el.form.formElements.get('aaa_participant_claim___lecture_fee');
    var elTcnLabel = el.form.formElements.get
        ('aaa_participant_claim___please_enter_your_tcn');
 
  
    if (elParticipantTutor.getValue() === 'Participant')
    {
        eletbSchool.show();
        elTcnLabel.show();
        elAgreedFee.hide();
        elLectureFee.hide();

In fabrik 4 when i trigger the dropdown to show "Participant" I get a load of errors in the console and a spinning icon "Validating"

mootools-core.js:3 POST https://joomla4.edcentretravelclaim.ie/index.php 500 (Internal Server Error)
send @ mootools-core.js:3
s.extend.$owner @ mootools-core.js:3
send @ mootools-more.js:3
doElementValidation @ form.js:3
s.extend.$owner @ mootools-core.js:3
(anonymous) @ element.js:3
dispatch @ jquery.min.js?3.6.3:2
y.handle @ jquery.min.js?3.6.3:2
VM55905:1 Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at Object._completeValidaton (form.js:3:16729)
at s.extend.$owner (mootools-core.js:3:17367)
at Object.<anonymous> (form.js:3:16615)
at Object.<anonymous> (mootools-core.js:3:18507)
at Array.forEach (<anonymous>)
at Function.forEach (mootools-core.js:3:2508)
at Array.each (mootools-core.js:3:4427)
at Object.fireEvent (mootools-core.js:3:18468)
at s.extend.$owner (mootools-core.js:3:17367)

How can i change my js validation so that it works in joomla4 / fabrik4?

 

[troester]

As said above:
Try
jQuery(elAgreedFee).hide();
jQuery( elLectureFee).hide();