Initialize all form components | Community
Skip to main content
Ryano_DE
Ryano_DE
New Participant
April 21, 2021
Solved

Initialize all form components

  • April 21, 2021
  • 4 replies
  • 2918 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mayank_Gandhi

@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.

4 replies

Mayank_Gandhi
Mayank_GandhiAccepted solution
Employee
May 4, 2021

@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.

    Ryano_DE
    Ryano_DEAuthor
    New Participant
    April 29, 2021

    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.

    Mayank_Gandhi
    Mayank_Gandhi
    Employee
    April 23, 2021

    @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."

      Ryano_DE
      Ryano_DEAuthor
      New Participant
      April 29, 2021
      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?
      G
      GirishBedekar
      New Participant
      April 21, 2021

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

        Ryano_DE
        Ryano_DEAuthor
        New Participant
        April 29, 2021
        See comment above
        Terms & ConditionsAccessibility statement

        Loading footer...