topic Re: $ not defined / jQuery not supported? in CMS Development

$ not defined / jQuery not supported?

SRalston05 — Thu, 06 Apr 2023 22:46:25 GMT

I don't know much about Hubspot. I'm trying to modify a form for a customer. I need to use jQuery but when I try something as simple as a $document.ready() log to console I get "Uncaught ReferenceError: $ is not defined" in Chrome DevTools Console. I've tried the instructions shown here - https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages - but I'm not finding the same options described in that article.

And is javascript/jQuery availability determined by the type of Hubspot account?

Thanks for any input.

Steve R.

Re: $ not defined / jQuery not supported?

Indra — Fri, 07 Apr 2023 08:05:11 GMT

Hi @SRalston05 ,

HubSpot stopped supporting the latest jQuery version from the build-in option inside the settings where you can enable it. But when using the build in jQuery, you need to write it in full or wrap it like this.

Wrapper function:

jQuery(function($) { var selector = $('.element'); }

Full

var selector = jQuery('.element');

But it's even better to use vanilla JS so don't have to rely on jQuery if it get's disabled.

var selector = document.querySelector('.element');

It's also good to check the article How to upgrade to the latest version of jQuery for extra information

Re: $ not defined / jQuery not supported?

BarryGrennan — Mon, 10 Apr 2023 16:52:54 GMT

What are you trying to achieve? There may be a better way to achieve it than jQuery.

If you're trying to modify a Hubspot form $document.ready() won't work anyway as you need to wait until after the form has loaded using a Global Form Event Listener like:

window.addEventListener('message', event => { if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { // YOUR CODE HERE } });

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: $ not defined / jQuery not supported?

SRalston05 — Tue, 11 Apr 2023 22:02:51 GMT

There definitely may be a better way to do what I'm trying to do. I need to add the values of one set of checkboxes, a couple text fields, and a select input into a hidden text area. When the form is submitted, that field, along with some others, gets sent to a remote API. The main act of submitting the form works fine, I just need to get the values I mentioned into the text area, because the text area has a place in the API but the other fields do not.