Hellooo community,
here’s a very compelling problem.
I use the library : https://github.com/hilios/jQuery.countdown and it works fine except when there’s a date change.
So the problem is there, when I change the date from my mongodb database, the date with the jquery countdown library does not change, while on the HTML DOM, the date has been updated.
The library isn’t reactive, maybe that’s the problem? Do you have a similar but reactive library to offer me?
Otherwise, here is my code to display my countdown:
onRendered :
Template.departs.onRendered(function(){
this.autorun(function() {
window.numberOfChild.get();
$('[data-countdown]').each(function () {
let $this = $(this), finalDate = moment($(this).data('countdown')).utc().format("Y-M-D H:m:s");
$this.countdown(finalDate, function (event) {
if (event.strftime("%D") <= "00") {
if(event.strftime("%H") > "00")
$this.html(event.strftime("%Hh%M"));
else if(event.strftime("%M.%S") <= "01.00") {
$this.html("Proche");
if (event.strftime("%M.%S") <= "00.00")
$(this).closest('tr').remove();
}
else
$this.html(event.strftime("%M min"));
}
else
$this.html(event.strftime("%Dj %Hh%M"))
});
});
});
});
depart.html :
<template name="departs">
<table class="horaire-arret">
<thead>
<tr>
<th>Ligne</th>
<th>Destination</th>
<th>Départ</th>
</tr>
</thead>
<tbody>
{{#each depart}}
<tr class="{{@index}}">
<td><img src="/images/picto/{{numeroVehicule}}.{{jpgOrGif numeroVehicule}}" alt="ligne"></td>
<td>{{nomDestination}}</td>
<td data-countdown="{{horaireRealiseArrivee}}" data-id="{{_id}}">{{#if perturbation}}<img src="/images/picto/picto-trafic.png" alt="info-trafic">{{/if}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Thanks for your help!
PS : I’m using Meteor V 1.6.1.2
.