JavaScript loading but not being applied in Drupal 8 theme

Question

I'm using this javascript to create a 'zaccordion' on my Drupal 8 site. However, it's not working. My 'slideshow' just appears as a bulleted list of images.

Here's what I've got so far:

A block on my page with the following content:

<ul id="slideshow">
<li>image</li>
<li>image</li>
</ul>

I've also got the required javascript files from the download link (above) in themename/js. I've also got my own instantiation of the zaccordion in another js file in that same folder and it targets #slideshow like so:

(function ($) {
  $(document).ready(function() {
    $("#slideshow").zAccordion({
      settings here
    });
  });
})(jQuery);

Then, in my libraries.yml file I have this:

zaccordion:
  header: true
  version: 1.x
  js:
    js/jquery.zaccordion.min.js: { }
    js/jquery.zaccordion.js: { }
    js/zaccordionUsage.js: { }
  dependencies:
    - core/jquery

I put that in the 'header' because it wasn't working in the footer. I can confirm the files are being pulled into the page because I see links to the scripts in the <head> of the html.

Finally, I have the javascript library being placed into the page with this call near the top of page--front.html.twig:

{{ attach_library('themename/zaccordion') }}

Are all these settings correct?

I have this same slideshow functionality working easily on a Jekyll site I created so I assume it's something to do with the way my block is trying to reference the javascript files or something.

Note: yes, I have JavaScript aggregation unchecked (Performance > Aggregate Javascript)

You only need to load js/jquery.zaccordion.min.js: { } the minified version. There is no need to load the unminified version js/jquery.zaccordion.js: { } you're basically loading the same script twice. The unminited version is for development use, since it's easy to read. The minified version is for production use, as it removes all the white spaces and compacts the code making the file size smaller. — No Sssweat
– No Sssweat, Commented Sep 1, 2016 at 22:14
I see. Well that gives me cleaner code at least. Thanks for the tip! — Sage
– Sage, Commented Sep 1, 2016 at 23:11

Sage · Accepted Answer · 2016-09-01 23:25:43Z

2

The dumbest of all possible mistakes was the answer. I had a <div> wrapping my insertion of the page block, like so:

{% if page.slideshow %}
{{ attach_library('themename/zaccordion') }}
    <div class="col-xs-12" id="slideshow">
        {{ page.slideshow }}
    </div>
{% endif %}

I thought if I put the attach_library line there it would load it 'closer' to the actual code needing it (don't try to understand what I was thinking). At any rate, I noticed that I have an id="slideshow" here as well. So I had TWO id="slideshow" - one on this <div> and another on the <ul> in the block...that was causing the slideshow not to work. So I just changed the id of this <div> to something else and it worked.

answered Sep 1, 2016 at 23:25

Sage

2,46328 silver badges46 bronze badges

Mistakes are not always a bad thing, as you can learn from them :)

No Sssweat
– No Sssweat

2016-09-02 00:47:01 +00:00
Commented Sep 2, 2016 at 0:47

Add a comment |

Stack Exchange Network

JavaScript loading but not being applied in Drupal 8 theme

1 Answer 1

Your Answer

Hot Network Questions

JavaScript loading but not being applied in Drupal 8 theme

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions