CODEWITHSUNDEEP
jquerymaterializeexpress-handlebars
Kevin H.
Kevin H.

Reputation: 348

Materialize Dropdown not Working in Handlebars Rendering

Other posts on this issue haven't helped me out so far, so I thought I'd share my challenge.

This below is my main.handlebars setup including my jQuery and Materialize libraries, as well as an explicit section to initialize the dropdown() method.

<body>
  {{{body}}}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>
    $(document).ready(function (e) {
      alert("jquery load");
      debugger;
      $('.dropdown-trigger').dropdown();
    });
  </script>

</body>

And rendering within that {{body}}, here is the part of my nav that has the desired drop-down:

    <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content' role="menu">
      <li><a href="#city">City</a></li>
      <li><a href="#host">Host</a></li>
      <li><a href="#interest">Interest</a></li>
      <li><a href="#dates"><i class="material-icons">view_module</i>Dates</a></li>
      <li class="divider" tabindex="-1"></li>
      <li><a href="#all"><i class="material-icons">cloud</i>All</a></li>
    </ul>

Based on what I've read I should be all good . . . and I know that the initialize <script> runs by testing with an alert(), but get no action. Stumped!

Upvotes: 0

Views: 332

Answers (1)

Neil VanLandingham
Neil VanLandingham

Reputation: 1086

It appears you are using Materialize version 0.100.2, but you are reading the documentation for Materialize version 1.0.0.

If you want to use version 0.1, you will need to use the attribute data-activates instead of data-target and the class name dropdown-button instead of dropdown-trigger in your markup.

More information on breaking changes between two version can be found here: https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md

Cheers!

Upvotes: 1

Related Questions