Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T15:37:58.447Z
Answers.Text: 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?
Answers.UserDisplayName: John Johnson
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T15:43:19.517Z
Answers.Text: 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.
Answers.UserDisplayName: Steve Rowling
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T16:13:31.807Z
Answers.Text: 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.
Answers.UserDisplayName: John Johnson
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T17:12:45.577Z
Answers.Text: 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.
Answers.UserDisplayName: John Johnson
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T18:18:58.140Z
Answers.Text: 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.
Answers.UserDisplayName: Steve Rowling
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-13T22:12:40.650Z
Answers.Text: 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`
Answers.UserDisplayName: John Johnson
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-14T08:00:20.277Z
Answers.Text: 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.
Answers.UserDisplayName: Steve Rowling
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-09T14:39:28.420Z
Answers.LastActivityDate: 2018-08-09T18:26:52.030Z
Answers.LastEditDate: 2018-08-09T18:26:52.030Z
Answers.UserDisplayName: Steve Rowling
Body: <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>
  
Tags: <templating><craft3>
Title: Template loads via jQuery .load(), but no {% js %} tags are included
ThreadText: # 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:
  
  ```
  <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!
  
  **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 `</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>
  
  > **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**: username_1, 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.  
  
  ---
  
  