Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Initialize all form components

Avatar

Level 2

I have a form with tabs and repeatable panels.

 

On load I'd like to run some jQuery and interrogate some fields that are on other tabs which are hidden on 1st load.

But the jQuery cannot find the elements in the DOM until the user has visited the tabs.

 

I have been able to work around this in code by setting focus to each panel, and back to the first panel with code.

This simulates a user visiting the tabs. Now the DOM elements on the tabs are accessible.

 

I'm stuck with repeatable panels. Hidden accordion panels cannot be read by jQuery until the user clicks on them to reveal them.
How do I loop over and set focus on these instances?

 

Is there a better way to "initialize" all the fields in all the panels (including hidden and hidden/repeated) on load of the form?
I'm hoping for a magic 'initialize all' script that will make sure all the DOM is loaded without the user having to click on everything and i won't have to write this silly code.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@Ryano_DE Let's discuss on 'I'm stuck with repeatable panels. Hidden accordion panels cannot be read by jQuery until the user clicks on them to reveal them.
How do I loop over and set focus on these instances?'

The somexpression for the repeatable panel/rows is driven by the main panel or row. You should be able to construct a somexpression for all the rows something like we do in array or  JSON with child nodes.

View solution in original post

10 Replies

Avatar

Level 9

Can you please give us more details in the use case?

Avatar

Employee Advisor

@Ryano_DE  I like your magic all intention :). But to be true I really didn't get what Is the objective here? 

From the API DOC "There is no link between Dom ready events and the connect API. If one wants to access the HTML DOM from inside the connect callback, the recommended approach is to listen on the jQuery ready event or the native DOMContentLoaded event. Similarly if one wants to access GuideBridge APIs one needs to wait for the connect callback to get fired."

Avatar

Level 2
Thanks Mayank, The issue i'm trying to get around is the all the hidden HTML elements are simply not rendered until a user opens a tab or expands a collapsible panel. Is there a way to 'initialise' all the components of a form in code?

Avatar

Employee Advisor
@Ryano_DE I guess no, more specifically if you have enabled lazy load that will make almost impossible.

Avatar

Level 2
Is"enabled lazy load" a thing I can turn on /off? At a form level? Maybe that's the answer I'm looking for!

Avatar

Employee Advisor
@Ryano_DE By default, lazy loading isn't enabled. You have to manually do that.

Avatar

Level 2

The scenario is the form uses restoreGuideState from an API on load.
The state doesn't seem to load into any fileAttachment components unless they have been visited first (and so initialised) by a user.
So, I'm trying to use a combination of guideBridge and jQuery to simulate a user 'focusing' on all of the hidden tabs and 'clicking' on repeatable panels, before loading.
Yuk.

Avatar

Correct answer by
Employee Advisor

@Ryano_DE Let's discuss on 'I'm stuck with repeatable panels. Hidden accordion panels cannot be read by jQuery until the user clicks on them to reveal them.
How do I loop over and set focus on these instances?'

The somexpression for the repeatable panel/rows is driven by the main panel or row. You should be able to construct a somexpression for all the rows something like we do in array or  JSON with child nodes.