Hide and unhide a field based on another field...

[mauro]

Hi Fabrik community,

I'm trying to do this: I have a button field in a form. I would like this button to be displayed only if a value in another field (let's say it's called 'trigger_field') is different from '0' (zero).

So, to make that, I tried to set a js event on 'change' and on 'load' (from within the fabrik element backend) on the 'trigger_field', and it works but... The problem is that when the user loads the form, for some instants he is able to see the button that should be hidden from the start (if the trigger_field has a zero value)... That's not very nice.
I suppose that's because the load event is triggered only when the page is fully loaded and rendered in the browser.

So, after many many attempts, I came to this solution:

1. set the button element as an hidden element (you can do that in the backend by changing its type to field element, set hidden option to true and then rechange the element type to button).
   
   
2. set two js events 'change' and 'load' on my trigger_field element (from the fabrik backend) with a code like this:

/*
IF trigger_field IS NOT 0: show the button
                     ELSE: hide the button
*/
var $btnObj = Fabrik.getBlock('form_XXX').elements.get('yourTableName___yourButtonFieldName');
var $btnElem = $btnObj.getElement();
var $btnElemContainer = $btnElem.findClassUp('fabrikElementContainer');

if (this.getValue() != '0')
{
  $btnElemContainer.classList.remove('fabrikHide');
  $btnElemContainer.show();
}
else
{
  $btnElemContainer.classList.add('fabrikHide');
  $btnElemContainer.hide();
}

In this way, the user doesn't have to see that button for some instants when he loads the form (if the stored trigger_field is 0, of course), being that it is hidden from the start. A little problem now is that if the trigger_field stored in the record was '1', the button will not be displayed instantly when the form is loaded, but that's fine to me... I think it's inconvenient to let the user see something that he should not see for some instants before it hides itself, but the opposite it's not so unpleasant (at least, for my application).

Being that I'm a newbie of Fabrik, I don't know if the above approach is the right way, so I was wondering if there is a better/smarter/cleaner/simpler way to make that...

 

[mauro]

I just found out that the Fabrik element object has hide() and show() functions that do all the necessary class removal/adding things, so my javascript event code can be semplified like this:

/*
IF trigger_field IS NOT 0: show the button
                     ELSE: hide the button
*/
var $btnObj = Fabrik.getBlock('form_XXX').elements.get('yourTableName___yourButtonFieldName');

if (this.getValue() != '0')
{
  $btnObj.show();
}
else
{
  $btnObj.hide();
}

That's much nicer...

EDIT: That would be much nicer... Sorry, but it turns out that the above code doesn't work... Read the following post...

 

[mauro]

Sorry, it appears that the above code doesn't work as expected, because when you do a $btnObj.show() the Fabrik engine removes from the element container the class '.fabrikHide' instead of the class 'fabrikHide', so the element remains hidden until you manually remove the 'fabrikHide' class too. Is this by design or is it a bug? Anyway, for now I am back to using the code (a little longer) in my first post...

 

[cheesegrits]

Ooops. Bug. Fixed. Thank you.

https://github.com/Fabrik/fabrik/commit/a02c5390c1dc3e2a13243235a6cecb5699fae930

-- hugh

 

[mauro]

Wow, that's fast... Thanks! Now hiding and showing elements from within javascript event code can be cleaner and simpler!