SIGN UP

JQuery not firing on Page

By: Rudi JvR | Asked: 06/16/2023
Forums › Category: General questions › JQuery not firing on Page
1 Vote Up Vote Down
Rudi JvR asked 1 year ago
I added a JQuery to my form's custom HTML section under the form settings. When I preview the form everything works as expected. If I then add this form to one of my site's pages it stops working.   Context regarding my form and the the custom script (see diagram attached):
  • The User inventory form contains various lookups to a Master form (Species) to pull entries.
  • On this same User form there is a lookup field referencing a different form (Sub-species) which filters a list of values based on the "Species" selected from the fields pulling from the Species form.
  • This is where my JQuery comes in:
    • The JQuery populates a hidden field which is used to filter the list of values associated/matching the Species selected by the user. The hidden field is "watched" to filter a list of Sub-Species entries for the user to select from a drop down.
What could be the reason for the JQuery not working once my form is used on one of my site's pages?   Thanks for any assistance that will help me past this bump.
1 Answers
1 Vote Up Vote Down
Best Answer
Rudi JvR answered 1 year ago

When inspecting the page with the User form, I managed to identify an error on the page where the form is loaded - "jQuery is not defined" - See image attached.   How do I go about defining the custom script loaded in the "After Fields" section of the Formidable Form?  

Attachments
jQueryReferenceError.png
Rob LeVineRob LeVine replied 1 year ago

The error is just what it implies, that the jQuery libraries are not included. You can choose to either include it for just that page or use a header/footer injection plugin to include it for all pages. See the basic info here - https://www.w3schools.com/jquery/jquery_get_started.asp

Victor Font replied 1 year ago

It's either what Rob said, or you have some type of optimization happening that is loading jQuery after your function. Is jQuery loading in the head or foot of your theme? It should be loading in the head. If it loads after your form, you'll get the error message you see.

Rob LeVineRob LeVine replied 1 year ago

Good point Victor, you can either post the URL to the page or inspect the page source yourself to see and search for jquery and see if the files are loaded at all.

Rudi JvR replied 1 year ago

Thanks Rob!

It seems to be a problem with the Kadence Theme I'm using. Kadance force my scripts to be loaded after the rest of the page.

When adding the script manually to my site's footer.php, it works. Not ideal, but at least I now have a working solution.

I tried using various plugins (e.g. WPCode) to inject the script, but even these seem to be loaded outside of the theme.

FYI: Control over Header/Footer details is a Premium/Pro feature of Kadence

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right