Two clicks required to load Modal and SideNav (Meteor with materialization)
I have a weird problem with my Materialize navigation in Meteor. The weird thing is that when I click a link in the navigation, the sidebar or modal part only loads when I click SECOND. So I have to click the link once (where nothing happens) and then again for the item to appear. After that, the element is loaded on any click (only one click required).
I have never had this problem and I think it might be a materialization problem. However, before counting on materializing, I want to check with you guys and hear if I can't call my JQuery functions wrong or something. Here is the code:
header.html:
<template name="header">
<nav>
{{> sideNav}}
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><span class="light"></span>hamok</a>
<ul id="nav-mobile" class="left">
<li><a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a></li>
<li><a href="#"><i class="mdi-action-search left"></i>Search</a></li>
</ul>
<ul id="nav-mobile" class="right">
{{#if currentUser}}
<li><a id="logout">Sign out</a></li>
{{else}}
<li><a class="modal-trigger-login" href="#loginModal">Account<i class="left mdi-action-account-circle"></i></a></li>
{{/if}}
</ul>
</div>
</nav>
{{> loginModal}}
</template>
<template name="loginModal">
<div id="loginModal" class="modal">
<div class="modal-content">
{{> atForm}}
</div>
</div>
</template>
<template name="sideNav">
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
</template>
header.js
Template['header'].helpers({
});
Template['header'].events({
'click .modal-trigger-login': function() {
$('.modal-trigger-login').leanModal();
},
'click #logout': function() {
Meteor.logout();
},
'click .button-collapse': function() {
$(document).ready(function(){
$(".button-collapse").sideNav();
});
}
});
Thanks guys for watching!
source to share
What it leanModal
does is initialize the jQuery plugin, so it should be called inside your template onRendered
, not when the modal trigger button is clicked.
Template.header.onRendered(function(){
this.$(".modal-trigger-login").leanModal();
});
You can delete the event click .modal-trigger-login
: you currently need 2 clicks simply because the first one just initializes the plugin.
Likewise, your initialization call sideNav
should be made in the lifecycle event onRendered
:
Template.header.onRendered(function(){
this.$(".button-collapse").sideNav();
});
source to share