CODEWITHSUNDEEP
meteor
flimflam57
flimflam57

Reputation: 1334

materialize modal in Meteor how to trigger modal

I think I'm confused on how to trigger a modal from the Materialize Modal package. Materialize Modal I've got the package loaded and I'd like to use one of the pre-baked modals.

JS:

MaterializeModal.form({
title: "Enter some Data!",
bodyTemplate: "my-form",
callback: function(error, response) {
  if (response.submit) {
    // Iterate over form results & display.
    for (var field in response.form) {
    Materialize.toast(field + ": " + response.form[field], 5000, "green");
  }
  } else {
    Materialize.toast("Cancelled by user!", 5000, "red");
  }
}
});

MaterializeModal.display({
  bodyTemplate: "my-form"
});

And the template:

<template name="my-form">
  <div class="row">
    <div class="input-field col s6">
      <input id="first_name" type="text" name="first-name" class="validate">
      <label for="first_name">First Name</label>
    </div>
    <div class="input-field col s6">
      <input id="last_name" type="text" name="last-name" class="validate">
      <label for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input disabled id="disabled" type="text" name="disabled-input" class="validate">
      <label for="disabled">Disabled</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="password" type="password" name="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" name="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
</template>

If I've got a button, say:

 <button id="client-search" class="someClass">Search</button>

How would the modal be triggered from the button click? Apologies for the dumb question.

Upvotes: 1

Views: 1451

Answers (1)

Mozfet
Mozfet

Reputation: 369

As per the docs: Specify the Modal ID in button data-target, add the class modal-trigger to the button and register the trigger. See the docs at http://materializecss.com/modals.html

HTML

<button id="client-search" class="modal-trigger">Search</button>

JavaScript

Template.my-form.onRendered({
  $('.modal-trigger').leanModal();
});

There are some caveats though: modals and dropdowns do not work in the latest version of Materialize on Meteor because Meteor uses a crazy old outdated version of jQuery (it seem impossible to change Meteor's jquery version without branching and repackaging your own Meteor distro) and Materialize relies on newer jquery functionality. I worked around this by using an older version of Materialize, specifically poetic:[email protected] (SASS version of Materialize).

Upvotes: 1

Related Questions