SOLVED: Inline Java Script to hide/show elements in repeated group

[bggann]

Reference this thread http://fabrikar.com/forums/index.php?threads/javascript-inline-code-hide-another-element.47298/

My subscription is messed up so I can't post in pro or standard right now - so I'm here in Community.
I'm trying to show/hide elements based on another element value - very basic. I can do it with the pre-defined functions, however I want to batch it because I'll be doing a lot of these fields if it works well. The pre-defined work, but get very cumbersome if you have a lot.

This is a site that deals with aerial firefighting records.
I should note - these fields are part of parent/child pairs. I'm editing the parents.
I should also note - these fields are in repeating groups.
Finally caching is turned off for this site.

Case is (using friendly names - see below for code)
- apply on form load or on change of "Gallons Retardant"
if (Gallons_Retardant == 0) {
hide (Marsh Funnel Time)
hide (Cost per gallon)
hide (total cost) }
else {
show (Marsh Funnel Time)
show (Cost per gallon)
show (total cost)
}

I want to apply this on load of the form or on change of "Gallons Retardant". That way if they open a previously edited record that has Gallons Retardant not zero, the other elements are show. If gallons retardant is zero - they are not shown.

I will also have to "set" marsh funnel and cost per gallon to 0 if gallons is changed to 0 - but lets get the hide/show working first.

--------
I created a js file in components/com_fabrik/js called
form_2.js (my form ID is two. I get this from the number on the 1st column of forms display in the backend)
Contents of this js file is.
function hideRetardantFields(el) {
var elGallons = el.form.formElements.get('daily_log_7_repeat___gallons_retardant');
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time');
var elB = el.form.formElements.get('daily_log_7_repeat___refractometer_reading');
var elC = el.form.formElements.get('daily_log_7_repeat___retardant_cost_per_gallon');
var elD = el.form.formElements.get('daily_log_7_repeat___retardant_cost');

if (elGallons.getValue() == '0') {
elA.hide();
elB.hide();
elC.hide();
elD.hide();
return;
}
else {
elA.show();
elB.show();
elC.show();
elD.show();
}
return;
}

I call this from the element "daily_log_7_repeat___gallons_retardant"
EVENT: On load
JS Code: hideRetardantFields(this);

EVENT: On Change
JS Code: hideRetardantFields(this);

What I expect.
- when the form loads, if the gallons_retardant field is 0, then hide the other 3, if not, show them.
- when gallons_retardant changes, if it is 0, then hide the other 3, if not, show them.

This seems pretty simple, but it is not working

 

[bggann]

Okay - after some hours, I'm closer, but still not working

The line
var elGallons = el.form.formElements.get('daily_log_7_repeat___gallons_retardant');
did not allow
elGallons.getValue()
to return a value.

I replaced it with
var elG = el.getValue();
Based on a different forum message.
Now, using console.log(elG); in the script I can at least see the value of my field.

So - the logic
if ( elG == '0' ) { }
is running.

BUT I'm getting an error in the Java Console on
elA.hide();
that it cannot read property of "null".
Indeed, the field elA default is probably null.

I'll thrash some more

 

[bggann]

I made the default for "marsh_funnel_time" 0 (zero) in the form.
it shows up as 0 on the form on load
But the javascript is still returning
cannot read property of "null" on elA.hide()
and console.log(elA); returns null.
So - the hide/show property does not exist.....

Documentation rather than conflicting forum posts would be nice. This should not be hard, but I"m a javascript novice and I don't know what I'm doing wrong and I've spent most of the day. Done for now.
-bg

 

[bggann]

Okay - I identified the problem, if not the solution.

My code uses the placeholder name for the field. But in a repeated group, a "_x" is appended to the placeholders where "x" is the repeated group number (starting at 0).

So - if I change
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time');
to
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time_0');

Now - the code returns the correct value for elA.

---------
Now - i need to search for some way to get the group number in the so I can construct the name. Clearly I can't hard code it because I don't know how many groups there will be. Also - it does work because if I use the 'predefined' java functions in the element javascript plugin, it behaves correctly on a per group basis.
--------
Okay - how to find the repeated group number in a element java script....

 

[bggann]

Okay - it works, sort of (except for a delay on load).
The delay on load is another issue I've seen discussed and I don't know if there is a fix for that.
The fields are visible when you load the form, then disappear.
-----------
Here is the solution (2 methods)
The function el.getRepeatNum(); returns the active group number, so by adding
var repeat = el.getRepeatNum();

and appending +repeat to each element name, it works for each group.

function hideRetardantFields(el) {
var elG = el.form.formElements.get('daily_log_7_repeat___gallons_retardant');
var gallons = el.getValue();
var repeat = el.getRepeatNum();
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time_'+repeat);
var elB = el.form.formElements.get('daily_log_7_repeat___refractometer_reading_'+repeat);
var elC = el.form.formElements.get('daily_log_7_repeat___retardant_cost_per_gallon_'+repeat);
var elD = el.form.formElements.get('daily_log_7_repeat___retardant_cost_'+repeat);
console.log(gallons);
console.log(elA);
if (gallons === '0') {
elA.hide();
elB.hide();
elC.hide();
elD.hide();
}
else {
elA.show();
elB.show();
elC.show();
elD.show();
}
return true;
}

Method two:
In the element call
hideRetardantFields(this,this.getRepeatNum());

In the fuction use
function hideRetardantFields(el,repeat)

the value repeat will have the group number