Javascript pre-defined show/hide not working on joined lists

[thellie]

I'll try to keep this clear and simple

I have 7 lists, and 6 forms (the first 2 lists run off the same table).
Form 1 - Application form, rows created by staff
Form 2 - Update form - rows updated by staff or user
Form 3-6 - Additional information tables (personal details, passport details, next of kin, police checks)

When submitting the application form, it creates a row in the vol_appform table, and a row in each of the other tables adding the vol_appform.id to an FK (appform_id) in each table.

In the Update form, I have joined the other (3-6) tables using the appform_id, and I use bootstrap_tabs for the layout. This works well (see screenshot), except that the pre-defined show/hide js isn't working.

They work in the original lists, but not in the joined update form list.

Is there an obvious reason for this? In the J!3 version, I had all elements in the same table, and used groups to separate into sections - show/hide worked correctly. But for the new J!4 I wanted to see whether it would be more efficient to separate into different tables, so have built it slightly differently.

The screenshot below - the red section should be hidden unless/until the user clicks on the airport option. Works well in J!3

 

[lori19]

Hi

Out of my own learning: Do have the right trigger for show/hide js? If you're using buttons where the user has to click, it would be onClick, not onChan ge

Kindly,

 

[troester]

One "leg" of a join in Fabrik must be a primary key.
FROM aaa.appform_id TO bbb.appform_id doesn't look right.
It should all be
FROM vol_appform.id TO xyz.appform_id.

As @lori19 said: What are your JS actions?

 

[thellie]

Thanks for the quick feedback

I use Load and Click - Load to to set the status on loading the page, and Click if someone changes the status - exactly the same setup as my J!3 site.
I understand, and have changed, the initial leg of the joins to vol_appform.id.

It hasn't made a difference, but maybe I have to delete the joins and start again? I'll do a test version with just a couple of the tables, using the correct join method from Troester. In the meantime, I'm taking my son out for 13th birthday pizza...

 

[thellie]

Thanks for the quick feedback

I use Load and Click - Load to to set the status on loading the page, and Click if someone changes the status - exactly the same setup as my J!3 site.
I understand, and have changed, the initial leg of the joins to vol_appform.id.

It hasn't made a difference, but maybe I have to delete the joins and start again? I'll do a test version with just a couple of the tables, using the correct join method from Troester. In the meantime, I'm taking my son out for 13th birthday pizza...

Update:
I made a new list, using the same vol_appform table and created a join vol_appform.id TO vol_pickup.appform_id
The show/hide sections still shows on load, and none of the JS actions are working.

I could put all the separate lists into an article, using Regular Labs tabs, but I'm not sure about calling the correct appform_id for each table... probably easy, but I haven't sat down to think about it yet... and anyway, I think the current method using joins is the correct way to do it.

 

[troester]

Did you add a JS "hide" on load?
It's working on my site.
On which element is the JS?
Do you see JS errors in your browser console?

 

[thellie]

Did you add a JS "hide" on load?
It's working on my site.
On which element is the JS?
Do you see JS errors in your browser console?

Bloody hell, you had me worried for a second. I went completely white and sat there thinking, "What a nob, I forgot the Hide actions..!"...

But then I checked, and I hadn't

Medical Conditions is a radio button element with 3 options. Based on the option chosen, the Medical Notes textarea either shows or hides.

I'm not sure if the order of the actions is important or not, but I've always tried to make sure there's a chronological sense to it - if the textarea should be hidden on load, then that's the first action, etc...

Edit:
Sorry I forgot to answer about the js errors. I've just looked and there are some for the joined lists:

The error message is apparently to do with:
"
The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.
"

Would that be the empty variable? I'll try NULL instead, then if that doesn't work, remove it altogether to see what happens. btw, in J!3 the empty variable in a js action wasn't a problem.

However, it does work in the original form... so it shouldn't be that...?

 

[troester]

in J!3 the empty variable in a js action wasn't a problem.

There may be different JS libs etc.
It says element.js >eval, this seems to be related to custom code. Do you have some code with date?

Enable Debug JS in Fabrik Options to run the uncompressed JS files and get a meaningful line number.

You don't need to show something onLoad, this is the default.

Radiobutton element with JS hide onLoad is also working on my site. Are you using the correct values (not labels)?

 

[thellie]

There may be different JS libs etc.
It says element.js >eval, this seems to be related to custom code. Do you have some code with date?

Enable Debug JS in Fabrik Options to run the uncompressed JS files and get a meaningful line number.

You don't need to show something onLoad, this is the default.

Radiobutton element with JS hide onLoad is also working on my site. Are you using the correct values (not labels)?

I do have a number of calc elements to give me certain dates, eg
TO determine the cutoff date for completing the form:

$date = new DateTime('{vol_appform___startdate}');
$duration = 7;

$date->sub(new DateInterval('P' . $duration . 'D'));

return $date->format('jS M Y') . "\n";

I know this gives me a formatted raw value, but I don't know if that's a problem or not.

I have loaded the form with debug js and it gives me line 213 - but I don't know where I go to look to what this is.

...and, I have also loaded the form (in the front end) with all calc elements turned off AND I removed all the js actions, and replaced them with ONLY Hide actions for each of the options - ie the medical notes box should be hidden on load... but it still shows.

 

[troester]

Do you still get JS errors in the browser console?
Can you try an other browser? This looks like Mac with (I assume) Safari.

 

[thellie]

Do you still get JS errors in the browser console?
Can you try an other browser? This looks like Mac with (I assume) Safari.

I think I've found the culprit. In another topic I posted a couple of days ago, I asked about the https://fabrikar.com/forums/index.php?threads/jdate-plugin-allow-date-function-option-option.53905/

I just disabled this js action and the medical js actions are working correctly.

Below is a screenshot of the js code (this was the code that Cheesegrits wrote for me for the J!3 site).