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

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

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

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

<p>More details of the <code>{% js %}</code> tag can be found in the Craft 3 docs: <a href="https://docs.craftcms.com/v3/dev/tags/js.html" rel="nofollow noreferrer">https://docs.craftcms.com/v3/dev/tags/js.html</a></p>

CC BY-SA 4.0
2018-08-09T15:37:58.447Z
Maybe I'm being dense here. Isn't the `<script>` tag technically within the the `#newAddressForm` element because it's being `{% included %}` right in the middle there?
John Johnson
CC BY-SA 4.0
2018-08-09T15:43:19.517Z
No, because you are use the `{% js %}` tag to add the javascript. This makes it possible to add the javascript in your template close to where it is relevant, but the actual `<script>` tag will be rendered at end of the page's `<body>` tag by default. If you use the `{% js %}` tag in an `{% include %}` sub-template, it is still rendered at the end of the `<body>` tag in the final rendered page.
Steve Rowling
CC BY-SA 4.0
2018-08-09T16:13:31.807Z
Steve, thank you for the clarification. Re-thinking how my templates are organized might be my best path forward here so that I can avoid having to target the `#newAddressForm` element.
John Johnson
CC BY-SA 4.0
2018-08-09T17:12:45.577Z
I'm coming up empty. I've dumbed down some test templates and nothing works. The parent template `.jstest.twig` has jquery `.load` attached to a button, which loads a message into an empty div fine. It's supposed to also bring a `{% js %}` tag to say 'ready' in the console. No `{% js %}` is coming with it.
John Johnson
CC BY-SA 4.0
2018-08-09T18:18:58.140Z
Instead of using `{% js %}` tags to wrap your JavaScript in your template, just use a normal HTML `<script>` tag pair and it should work as you expect.
Steve Rowling
CC BY-SA 4.0
2018-08-13T22:12:40.650Z
While the `<script>` tag does appear in the loaded section, it comes before the jquery is called in the footer, thus returning a console error: `$ is not defined`
John Johnson
CC BY-SA 4.0
2018-08-14T08:00:20.277Z
But aren't you using jQuery to `.load()` the page fragment with the included JS? So surely jQuery should be available as you've already used it to `.load()` the page fragment? I really need to see the full details of your templates and what you're trying to achieve to be able to help you more.
Steve Rowling
CC BY-SA 4.0
2018-08-09T14:39:28.420Z
2018-08-09T18:26:52.030Z
2018-08-09T18:26:52.030Z
Steve Rowling
<p>Inside of a modal window I'm loading a form template via jQuery <code>.load</code>. For reasons I don't know, the <code>{% js %}</code> tags that need to come with the form template are not being loaded, even though the <code>{% js %}</code> tag is placed at the bottom of the loaded partial.</p>

<p>Here's the loading code</p>

<pre><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 %}
</code></pre>

<p>On click a modal will open, retrieve the template, look for the <code>#newAddressForm</code> 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.</p>

<p>The loaded partial template:</p>

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

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

  &lt;button type="submit"&gt;Save&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>And lastly, the <code>{% include %}</code> has the form fields and <code>{% js %}</code> tag inside.</p>

<p>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!</p>

<templating><craft3>
Template loads via jQuery .load(), but no {% js %} tags are included
# Template loads via jQuery .load(), but no {% js %} tags are included

(Asked by: username_0 on 2018-08-07)

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:

  
  {{ csrfInput() }}

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

  Save


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!

**Tags:** templating, craft3

---

## 1 answers

### Answer by username_1 on 2018-08-09. Score: 2

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

This means that the rendered

> **Comments:**
> **username_0**: Maybe I'm being dense here. Isn't the `<script>` tag technically within the the `#newAddressForm` element because it's being `{% included %}` right in the middle there?  
> **username_1**: No, because you are use the `{% js %}` tag to add the javascript. This makes it possible to add the javascript in your template close to where it is relevant, but the actual `<script>` tag will be rendered at end of the page's `<body>` tag by default. If you use the `{% js %}` tag in an `{% include %}` sub-template, it is still rendered at the end of the `<body>` tag in the final rendered page.  
> **username_0**: Steve, thank you for the clarification. Re-thinking how my templates are organized might be my best path forward here so that I can avoid having to target the `#newAddressForm` element.  
> **username_0**: I'm coming up empty. I've dumbed down some test templates and nothing works. The parent template `.jstest.twig` has jquery `.load` attached to a button, which loads a message into an empty div fine. It's supposed to also bring a `{% js %}` tag to say 'ready' in the console. No `{% js %}` is coming with it.  
> **username_1**: Instead of using `{% js %}` tags to wrap your JavaScript in your template, just use a normal HTML `<script>` tag pair and it should work as you expect.  
> **username_0**: While the `<script>` tag does appear in the loaded section, it comes before the jquery is called in the footer, thus returning a console error: `$ is not defined`  
> **username_1**: But aren't you using jQuery to `.load()` the page fragment with the included JS? So surely jQuery should be available as you've already used it to `.load()` the page fragment? I really need to see the full details of your templates and what you're trying to achieve to be able to help you more.  

---

