JS code works perfectly in JSFiddle, but won't work in Meteor
Question
I made script that changes the active Bootstrap tab based on the current day. As you should see, it works great on this JSFiddle .
However, I have tried adding this to my meteor application in several ways, including once without "meteorizing" it at all. This didn't work, so I tried looking it up and ended up wrapping the tabbed navigation in a <template name="nav"> . I then tried loading the script within a Template.nav.onRendered block. This didn't work either and now I'm stumped.
Edit: If anyone else has the same problem, the issue I had was that I was loading the script before the tab panels were loaded, therefore the active tab would be set, but the panel would not be shown.
Thanks for the help!
2 answers
solution1
1 ACCPTED 2015-10-07 14:21:54
According to your fiddle, code runs too early, before template is rendered. So you need to wrap your code within a function, and then run it inside your Template.nav.onRendered like this:
function initializeTabs() {
...
}
And then
Template.nav.onRendered(initializeTabs);
solution2
0 2015-10-07 14:21:29
It works fine using onRendered.
meteor create 32993732
cd 32993732
meteor add bootstrap
32993732.css:
body {
padding: 1rem;
}
.tab-pane {
padding: 1rem;
}
32993732.html:
<head>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#sunday" aria-controls="sunday" role="tab" data-toggle="tab">Sunday</a></li>
<li role="presentation"><a href="#monday" aria-controls="monday" role="tab" data-toggle="tab">Monday</a></li>
<li role="presentation"><a href="#tuesday" aria-controls="tuesday" role="tab" data-toggle="tab">Tuesday</a></li>
<li role="presentation"><a href="#wednesday" aria-controls="wednesday" role="tab" data-toggle="tab">Wednesday</a></li>
<li role="presentation"><a href="#thursday" aria-controls="thursday" role="tab" data-toggle="tab">Thursday</a></li>
<li role="presentation"><a href="#friday" aria-controls="friday" role="tab" data-toggle="tab">Friday</a></li>
<li role="presentation"><a href="#saturday" aria-controls="saturday" role="tab" data-toggle="tab">Saturday</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="sunday">Sunday</div>
<div role="tabpanel" class="tab-pane fade" id="monday">Monday</div>
<div role="tabpanel" class="tab-pane fade" id="tuesday">Tuesday</div>
<div role="tabpanel" class="tab-pane fade" id="wednesday">Wednesday</div>
<div role="tabpanel" class="tab-pane fade" id="thursday">Thursday</div>
<div role="tabpanel" class="tab-pane fade" id="friday">Friday</div>
<div role="tabpanel" class="tab-pane fade" id="saturday">Saturday</div>
</div>
</div>
</template>
32993732.js:
if (Meteor.isClient) {
Template.hello.onRendered( function(){
var day;
switch (new Date().getDay()) {
case 0:
day = "sunday";
break;
case 1:
day = "monday";
break;
case 2:
day = "tuesday";
break;
case 3:
day = "wednesday";
break;
case 4:
day = "thursday";
break;
case 5:
day = "friday";
break;
case 6:
day = "saturday";
break;
}
$('.nav-tabs li a[href="#' + day + '"]').tab('show');
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.