Materialize Modal and Dropdown Problems with Blaze

help
1

Hi all,

I recently ran into some problems when trying to use the Materialize modal and dropdown features with Blaze, specifically when there are multiple instances of each.

I have this template called cadcall:

<template name="cadcall">
	<tr>
		<td class="truncate">{{id}}</td>
		<td>FRI</td>
		<td>{{time}}</td>
		<td>{{type}}</td>
		<td>{{location}}</td>
		<td>{{notes}}</td>
		<td>
		  <a href=""><i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i></a>
		</td>
	</tr>
	<div id="call-details-modal" class="modal">
		<div class="modal-content">
			<h4>Call Details</h4>
			<div class="row">
				<form class="new-call col s12">
					<div class="row">
						<div class="input-field col s6">
							<input id="call-id" type="text" class="validate" disabled>
							<label for="call-id">ID</label>
						</div>
						<div class="input-field col s6">
							<input id="call-time" type="text" class="validate" disabled>
							<label for="call-time">Time</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<input id="call-location" type="text" autocomplete="off">
							<label for="call-location">Location</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
							<label for="call-notes">Notes</label>
						</div>
					</div>
					<div class="modal-footer">
						<button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<ul id='cadcallactions' class='dropdown-content'>
	  <li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
	  <li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
	</ul>
</template>

Here is the cadcall events:

Template.cadcall.events({
   'click .callresolve'(e) {
      Calls.remove(this._id);
   },
});

Here is the cadcall onRendered:

Template.cadcall.onRendered(function() {
  $(document).ready(function () {
    $('.call-details').leanModal();
  });
  $('.call-dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: false, // Does not change width of dropdown to that of the activator
      hover: false, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: true, // Displays dropdown below the button
      alignment: 'right', // Displays dropdown with edge aligned to the left of button
      stopPropagation: false // Stops event propagation
    });
});

Essentially, for each call there is in the Mongo database, I iterate each call entry. However, if there are multiple calls, the modal doesn’t function correctly. If I try to close the modal (by clicking the class callupdate after opening it, the gray area behind it stays.

In addition to the modal not working correctly, the dropdown menu also acts funky, specifically when I try to delete a field (by clicking the class callresolve). Whenever I try to delete a call entry it works, but thereafter the dropdown menus on the other call entries stop working altogether.

Presumably, since these problems only occur when I have multiple call entries, I think the HTML may be conflicting with each iteration of the call entry. Is there a way to remedy this issue? Any insight would be great!

Thanks,
darktakua