Template loads via jQuery .load(), but no {% js %} tags are included

Question

Inside of a modal window I'm loading a form template via jQuery .load. For reasons I don't know, the {% js %} tags that need to come with the form template are not being loaded, even though the {% js %} tag is placed at the bottom of the loaded partial.

Here's the loading code

{% js %}
  MicroModal.init()

  $(document).ready(function() {
    $('.trigger').click(function() {
      event.preventDefault();

      MicroModal.show('addressModal');
      $('.c-modal__content').load('account/profile/billing/add #newAddressForm');
    });
  });
{% endjs %}

On click a modal will open, retrieve the template, look for the #newAddressForm ID element, and an address form template will load within it. The HTML part of the form loads fine, but no JS is brought with it.

The loaded partial template:

<form method="post" id="newAddressForm">
  <input type="hidden" name="action" value="commerce/customer-addresses/save">
  {{ csrfInput() }}

  {% include "shop/_inc/addresses/form" %}

  <button type="submit">Save</button>
</form>

And lastly, the {% include %} has the form fields and {% js %} tag inside.

To reiterate, the HTML of the form loads fine. The JS does not come with it. I'm not sure if this is an issue with Twig, Craft, or jQuery. Help would be appreciated!

Answer 1

In Craft 3, the {% js %} tag places the javascript code just before the closing </body> tag in the rendered HTML document by default.

This means that the rendered <script> tag will not be in the #newAddressForm element, but will be rendered just before the closing </body> tag.

So if you are loading the rendered template using jQuery's .load() function and specifying the #newAddressForm element, the <script> tag will be excluded from the injected code as it isn’t within the #newAddressForm element.

Your best bet is to inline the <script> tag within the Twig template rather than using the {% js %} tag to include it. That way you can ensure that the code will be included in the #newAddressForm element as you need it.

More details of the {% js %} tag can be found in the Craft 3 docs: https://docs.craftcms.com/v3/dev/tags/js.html