How to use jQuery with amp-script?

Question

The AMP documentation mentions using jQuery with the amp-script component: https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

However, I do not see any examples nor an explanation of how to do so.

I've tried including jQuery in the example AMP pages below (3.4.1 and 2.2.4 respectively), and running this simple jQuery script:

$('button').click(function() {
    $('body').append('hello world');
})

Example AMP pages:

https://apps.yourstorewizards.com/sandbox/amp/amp-script/jquery3.html https://apps.yourstorewizards.com/sandbox/amp/amp-script/jquery2.html

Neither work as expected. Both produce javascript errors. Are there limitations as to which jQuery functions can be used in AMP?

Any help would be appreciated. Thanks.

Hanna

Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named "What topics can I ask about here?" and "What types of questions should I avoid asking?". Further, please read the Stack Overflow question checklist. Also learn how to post Minimal, Complete, and Verifiable Examples. – Cookson

@JayGray Thanks for the suggestions, I have updated my question. – Hanna

Answer 1

If you look at the following example: https://github.com/ampproject/amphtml/blob/master/examples/amp-script/todomvc.amp.html

which uses Vue.js, you will see that in the example, the following script is referenced vue-todomvc.js,

<amp-script layout="container" src="/examples/amp-script/vue-todomvc.js" sandbox="allow-forms">
...
</amp-script>

In inspection of that file, you will notice that the vue.js library compressed is included at the top along with the custom javascript for the example.

So in the jquery case, the same would apply. You would include the jquery library in a custom file along with your custom javascript using jquery.

Ideally there should be a way to reference jquery library in the amp-script tag itself and have your custom JS inlined or referenced in a separate file for a better user experience. I am in the process of proposing such a change. Thanks

Example of how I would prefer for it to work.

<amp-script layout="container" src="https://code.jquery.com/jquery-1.11.3.js" sandbox="allow-forms">
... // custom js
</amp-script>

or

<amp-script layout="container" 3p-lib-src="https://code.jquery.com/jquery-1.11.3.js" sandbox="allow-forms" src="my-custom-js.js>
... 
</amp-script>

Where there would be an attribute to reference the third party library, in this case 3p-lib-src and your custom js can reside in src.

Abshire

Thank you for your reply, Aaron. I've tried this with both jQuery 3.4.1 and 2.2.4. Below are example pages where you can see the simply jquery I'm trying to run, as well as the javascript errors that show in the console for each version. – Hanna

apps.yourstorewizards.com/sandbox/amp/amp-script/jquery2.html apps.yourstorewizards.com/sandbox/amp/amp-script/jquery3.html Are there limitations as to which jQuery functions that can run in AMP? – Hanna

@Hanna I think the issue with your examples is that you cannot affect elements outside of the <amp-script> tag. So in order to append text onto the body, the body tag would have to be inside the <amp-script> tag which probably wouldn't pass validation. That being said, I'm running into my own issues getting jQuery functional with some test code. In your case though, I think its simply because you cannot affect an element outside the tag. – Underpay

@ZachNicodemous The AMP documentation states that "adding an element to document.body will be reflected on the page as a new child of the amp-script element". amp.dev/documentation/components/amp-script/…? But just to be sure, I've adjusted my jquery3.html and jquery3.js to update a child div instead of body, and it still doesn't work. Thank you for taking a look though and taking the time to comment. Appreciate it. – Hanna

@Hanna I took a look at your jQuery3.html example and I'm seeing errors in the console: "TypeError: E.implementation is undefined" which is preventing it from running. I found a pretty comprehensive list of what is and is not supported by Javascript within AMP right now and with these limitations in mind, I'm not sure jQuery could run at this time: github.com/ampproject/worker-dom/blob/master/… – Underpay

@ZachNicodemous that is correct, the body should be the amp-script container. I will look into this more as I've noticed that many others have complained about this as well. Will update you when I gather my findings. Thanks – Abshire

Also note that the AMP sample vue.js is 14.7 KB, and the <amp-script> limit is 150 KB. The jQuery library you are running plus your JS may be greater than 150 KB. – Cookson

My last comment is wrong. The total size of jquery3.js is 118 KB, so that is not the issue. Just to be sure, I checked the JS - it's valid. Suggest that you open an issue on github.com/ampproject/amphtml/issues and direct the issue to @choumx – Cookson

The issue is with the many DOM API methods just not being supported. I am working on fixing this but am concerned with the possibility of the many API calls that need to be supported. I captured some of it here github.com/ampproject/worker-dom/issues/679. – Abshire