Answers.Body: <p>I’m gonna guess that you’re caching this block of code.</p>
  
  <p>You can’t technically cache an <code>includeJs</code> tag, because it’s not creating any HTML at that exact spot. It will only work the very first time, before the caching has taken place. Once the cached chunk of HTML is being retrieved from your database, the JS will not be a part of it. </p>
  
  <p>The workaround is to <em>not</em> cache your <code>includeJs</code> line. You can either omit it directly (by carefully placing your <code>cache</code> tags), or use a plugin like No Cache which briefly deactivates the caching for that spot. </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-07T14:56:53.927Z
Answers.Text: Oh my god, this was it! Thanks so much. It's within a HUGE Matrix content builder but the main template was caching it.
  
  This was driving me insane! :)
Answers.UserDisplayName: richardpixel
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-07T14:10:59.797Z
Answers.LastActivityDate: 2018-09-07T14:10:59.797Z
Answers.UserDisplayName: Lindsey D
Body: <p>Using Craft 2 and I have a Matrix Block which can contain a carousel item, which uses JS/jQuery. Because the content editor can add multiple instances of this Matrix Block I can’t  set up these carousels in my js file as I need to create unique names.</p>
  
  <p>So to get around this I’m putting the JS inline using <code>includeJs</code> and then in my Block template I set and use a Craft variable.</p>
  
  <p>What’s bizarre is that this works the first time I hit the page, but then this part of <code>includeJs</code> isn’t getting loaded/included on the page. Happens both locally and online.</p>
  
  <p>Here's the content of my Matrix Block:</p>
  
  <pre><code>&lt;section class="tabbedCircles  content  content--pad  {{ block.backgroundColour}}"{% if block.stickyNavId %} id="{{ block.stickyNavId}}"{% endif %}&gt;
      &lt;div class="grid"&gt;
          {% if block.headline %}
              &lt;h1 class="{% if block.headlineAlignment in ['center',] %}center  {% endif %}margin--double--mq"&gt;{{ block.headline}}&lt;/h1&gt;
          {% endif %}
          {% set carouselNav = block.headline|kebab  ~ 'Nav' %}
          {% set carouselContent = block.headline|kebab  ~ 'Content' %}
  
          &lt;div class="tabbed__circles__wrapper"&gt;
          &lt;ul class="tabbed__circles  margin--double--mq {{ carouselNav }}"&gt;
              {% for row in block.tabContent %}
  
              {% set iconStatic = craft.entries({
                  section: 'iconsStatic',
                  with: ['tabbedIconCircles.animationTemplate']
              }).relatedTo(row) %}
              &lt;li&gt;
                  &lt;div class="circle"&gt;
                      {% for entry in iconStatic %}
                          {% include "_includes/icon" with {
                              'name': entry.animationTemplate
                          } %}
                      {% endfor %}
                  &lt;/div&gt;
                  &lt;span class="text--h3"&gt;{{ row.tabTitle }}&lt;/span&gt;
              &lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
          &lt;/div&gt;
          &lt;ul class="tabbed__circles__content {{ carouselContent }}"&gt;
              {% for row in block.tabContent %}
              {% set iconStatic = craft.entries({
                  section: 'iconsStatic',
                  with: ['tabbedIconCircles.animationTemplate']
              }).relatedTo(row) %}
              &lt;li&gt;
                  &lt;figure class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__icon{% else %}content__split__icon--reverse{% endif %}"&gt;
                      {% for entry in iconStatic %}
                          {% include "_includes/icon" with {
                              'name': entry.animationTemplate
                          } %}
                      {% endfor %}
                  &lt;/figure&gt;
  
                  &lt;div class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__copy{% else %}content__split__copy--reverse{% endif %}"&gt;
                      &lt;h1&gt;{{ row.headline }}&lt;/h1&gt;
  
                      {{ row.body }}
                  &lt;/div&gt;
              &lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  {% set carouselJS %}
  
  ///// New Slick Carousel for 2018 Tabbed Circles and Content
  var carouselNav = '.{{ carouselNav }}';
  var carouselContent = '.{{ carouselContent }}';
  if ($(carouselContent).length) {
  
      $(carouselContent).slick({
          arrows: false,
          draggable: false,
          swipeToSlide: true,
          autoplay: true,
          autoplaySpeed: 3000,
          infinite: true,
          speed: 500,
          fade: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          asNavFor: carouselNav,
      });
  
      $(carouselNav).slick({
          mobileFirst: true,
          arrows: false,
          autoplay: false,
          //autoplaySpeed: 7000,
          draggable: true,
          slidesToShow: 2,
          slidesToScroll: 1,
          infinite: true,
          asNavFor: carouselContent,
          centerMode: false,
          focusOnSelect: true,
          responsive: [
              {
                breakpoint: 500,
                settings: {
                  slidesToShow: 3,
                }
              },
              {
                breakpoint: 700,
                settings: {
                  slidesToShow: 4,
                }
              },
              {
                breakpoint: 1100,
                settings: {
                  slidesToShow: 5,
                  slidesToScroll: 'none'
                }
              }
          ]
      });
  
      $(carouselNav).on('click', function(){
          $(carouselContent).slick('slickPause');
          $(carouselNav).slick('slickPause');
      });
  };
  {% endset %}
  
  {% includeJs carouselJS %}
  </code></pre>
  
Tags: <matrix><javascript><includejs>
Title: includeJs not consistently working
ThreadText: # includeJs not consistently working
  
  (Asked by: username_0 on 2018-09-07)
  
  Using Craft 2 and I have a Matrix Block which can contain a carousel item, which uses JS/jQuery. Because the content editor can add multiple instances of this Matrix Block I can’t set up these carousels in my js file as I need to create unique names.
  
  So to get around this I’m putting the JS inline using `includeJs` and then in my Block template I set and use a Craft variable.
  
  What’s bizarre is that this works the first time I hit the page, but then this part of `includeJs` isn’t getting loaded/included on the page. Happens both locally and online.
  
  Here's the content of my Matrix Block:
  
  ```
  <section class="tabbedCircles  content  content--pad  {{ block.backgroundColour}}"{% if block.stickyNavId %} id="{{ block.stickyNavId}}"{% endif %}>
      <div class="grid">
          {% if block.headline %}
              <h1 class="{% if block.headlineAlignment in ['center',] %}center  {% endif %}margin--double--mq">{{ block.headline}}</h1>
          {% endif %}
          {% set carouselNav = block.headline|kebab  ~ 'Nav' %}
          {% set carouselContent = block.headline|kebab  ~ 'Content' %}
  
          <div class="tabbed__circles__wrapper">
          <ul class="tabbed__circles  margin--double--mq {{ carouselNav }}">
              {% for row in block.tabContent %}
  
              {% set iconStatic = craft.entries({
                  section: 'iconsStatic',
                  with: ['tabbedIconCircles.animationTemplate']
              }).relatedTo(row) %}
              <li>
                  <div class="circle">
                      {% for entry in iconStatic %}
                          {% include "_includes/icon" with {
                              'name': entry.animationTemplate
                          } %}
                      {% endfor %}
                  </div>
                  <span class="text--h3">{{ row.tabTitle }}</span>
              </li>
              {% endfor %}
          </ul>
          </div>
          <ul class="tabbed__circles__content {{ carouselContent }}">
              {% for row in block.tabContent %}
              {% set iconStatic = craft.entries({
                  section: 'iconsStatic',
                  with: ['tabbedIconCircles.animationTemplate']
              }).relatedTo(row) %}
              <li>
                  <figure class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__icon{% else %}content__split__icon--reverse{% endif %}">
                      {% for entry in iconStatic %}
                          {% include "_includes/icon" with {
                              'name': entry.animationTemplate
                          } %}
                      {% endfor %}
                  </figure>
  
                  <div class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__copy{% else %}content__split__copy--reverse{% endif %}">
                      <h1>{{ row.headline }}</h1>
  
                      {{ row.body }}
                  </div>
              </li>
              {% endfor %}
          </ul>
      </div>
  </section>
  
  {% set carouselJS %}
  
  ///// New Slick Carousel for 2018 Tabbed Circles and Content
  var carouselNav = '.{{ carouselNav }}';
  var carouselContent = '.{{ carouselContent }}';
  if ($(carouselContent).length) {
  
      $(carouselContent).slick({
          arrows: false,
          draggable: false,
          swipeToSlide: true,
          autoplay: true,
          autoplaySpeed: 3000,
          infinite: true,
          speed: 500,
          fade: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          asNavFor: carouselNav,
      });
  
      $(carouselNav).slick({
          mobileFirst: true,
          arrows: false,
          autoplay: false,
          //autoplaySpeed: 7000,
          draggable: true,
          slidesToShow: 2,
          slidesToScroll: 1,
          infinite: true,
          asNavFor: carouselContent,
          centerMode: false,
          focusOnSelect: true,
          responsive: [
              {
                breakpoint: 500,
                settings: {
                  slidesToShow: 3,
                }
              },
              {
                breakpoint: 700,
                settings: {
                  slidesToShow: 4,
                }
              },
              {
                breakpoint: 1100,
                settings: {
                  slidesToShow: 5,
                  slidesToScroll: 'none'
                }
              }
          ]
      });
  
      $(carouselNav).on('click', function(){
          $(carouselContent).slick('slickPause');
          $(carouselNav).slick('slickPause');
      });
  };
  {% endset %}
  
  {% includeJs carouselJS %}
  
  ```
  
  **Tags:** matrix, javascript, includejs
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-09-07. Score: 2 | Accepted answer
  
  I’m gonna guess that you’re caching this block of code.
  
  You can’t technically cache an `includeJs` tag, because it’s not creating any HTML at that exact spot. It will only work the very first time, before the caching has taken place. Once the cached chunk of HTML is being retrieved from your database, the JS will not be a part of it.
  
  The workaround is to *not* cache your `includeJs` line. You can either omit it directly (by carefully placing your `cache` tags), or use a plugin like No Cache which briefly deactivates the caching for that spot.
  
  > **Comments:**
  > **username_0**: Oh my god, this was it! Thanks so much. It's within a HUGE Matrix content builder but the main template was caching it.  This was driving me insane! :)  
  
  ---
  
  