Gravity Forms JS not loading in header when used inside a tab

[dhunink]

Hi!

When including a Gravity Form (through the classis element or shortcode) on a page the Javascript files for Gravity Forms will be loaded in the header. I noticed that when adding a form to a Tabs element, the Gravity Forms Javascript files will move from the header to the footer. This causes issues when using the default Enhanced Userinterface from Gravity Forms: it loads the jQuery Chosen library but can’t initialize it if all the GF JS is loaded in the footer.

Here’s a working example directly on page: https://dev.tpgrf.nl/account/registreren/
Working screenshot:

Here’s an example were the form is part of the ‘REGISTREREN’ Tab and isn’t showing the enhanced userinterface: https://dev.tpgrf.nl/account/inloggen/
Screenshot of the same Input element but now without the Enhanced Userinterface:

Is Pro moving the GF JS on purpose when placed inside a Tabs element? How can this be overridden?

[rad]

Hi @dhunink,

Thanks for reaching out.

May I know which javascript? I compared the two and the scripts are added right below the form on both page. And it’s next to iframe code for gform_ajax_frame_3.

But yes, it looks like ajax processing isn’t working within the tab. But regardless, it should work since the scripts are there and loaded. Could you confirm which scripts? Maybe I just overlooked it.

Thanks!

[dhunink]

Hi Rad,

the main concern is with tje chosen.jquery.min script.
But notice the place of all JS that start with https://dev.tpgrf.nl/wp-content/plugins/gravityforms/js/

Alle the Gravity Forms Javascript files are loaded at the end of the page when the form is inside the accordion:

When the form is outside the accordion they are all loaded in the head section, as they always should:

[thai]

Hi There,

It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[dhunink]

As @Rad already confirmed it looks like ajax processing isn’t handled correctly when the form is inside a Tab, which is directly related to the Pro theme. The problem comes down to the Enhanced User Interface of Gravity Forms: that uses the jQuery Chosen script which can only run if content is actually placed correctly in the dom. This works when Ajax loading on the page itself, but not when loaded inside a Pro Tab. Hence the shoutout for help here, as the Gravity Forms Support champs correctly identified the way the forms is rendered inside a Tab seems to be different from the ‘normal’ way a form is displayed inside a Theme.
It’s also not related to any other third party script: I’ve checked several times without any other plugins then Gravity Forms enabled.

I would highly appreciate a more constructive response, like the one @Rad provided, since this IS a theme issue. I’d be happy to help in any way I can to identify the actual root of this issue and finding a way to fix it, as we might help out others as well.

[christopher]

Hi @dhunink,

I understand what you are saying about the Tabbed case. But please consider that this is indeed an edge case that is outside of our support scope. We will do our best to find why this is happening but we can not give any guarantee for a fix. At the moment the only suggestion that we can give is that you avoid using the Gravity Forms in tabbed, accordion or sliders.

My take on the case is that even the place of the Javascript is different it finally loads and it should work. I think the problem is that the initial rendering of the form is not happening as the form is in a hidden tab, and the jQuery Code of the Gravity Forms cannot select the correct element to even change the view of the form fields let alone the Ajax feature that @rad mentioned.

So I suggest that you check the case by adding the form in the first tab which is showing by default and see if it fixes the issue.

If not I’m afraid you will need to avoid using the Gravity Forms inside the elements that are initially hidden such as Accordions, Tabs or Sliders.

Another good test can be that you use a 3rd party plugin for the tabbed content and see if you add the form into a 3rd party tab the result is the same or not. If yes then it is not only specific to our tabbed element and you will need to follow up with the Gravity Forms support.

Thank you.

[dhunink]

Hi @christopher.amirian,

thanks for taking the time to think out this excellent debug-strategy.
Really appreciate it!

My findings so far:

• adding the form to a Pro Theme Tab that’s the visible tab works great: the GF Enhanced Interface is loaded
• using a 3rd party plugin for tabbed content replicates the issue: loaded in a tab that’s initially hidden will cause the enhanced user interface to not work correctly.

Conclusion: despite the very conclusive words of the GF support team, claiming this must be theme issue (for which at the time they did had some compelling arguments), it is clearly not.

Once again I really really appreciate thinking this through with me. I will report this back to the GF team and when a conclusion draws I will share that here, hoping to prevent more support calls from others.

Thanks Christopher!

[ruenel]

You’re most welcome.