Hilios countdown timer with laravel 5.6

Question

I'm struggling with Hilios's JQuery countdown timer, installed along laravel 5.6

I've got div with generated value, which looks like the one below:

<div data-countdown="{{ $data->expiration }}"></div>

And the result when generated looks just like that:

<div data-countdown="2018-06-15 17:25:30"></div>

So at the bottom of view's file, I've got implemented jQuery with countdown script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>

<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js" type="application/javascript"></script>

<script type="application/javascript">
    $('[data-countdown]').each(function() {
       var $this = $(this);
       var finalDate = $(this).data('countdown');
       $this.countdown(finalDate, function(event) {
          $this.html(event.strftime('%D days %H:%M:%S'));
       });
     });
</script>

The problem is that it's not working at all, and what's worse - I'm not getting any error's in console...

Thanks in advance for any suggestion, that might help with this problem.

Answer 1

In the case your code is running correctly separately (like on jsfiddle), try-and-error or some console logs might be your friend.

Trying following code, verify that the console output is correct and what you expected. If the data attributes content is correct, I might suspect some issues on the event.strftime function:

  <script type="application/javascript">
    $('[data-countdown]').each(function() {
      var $this = $(this);
      var finalDate = $(this).data('countdown');

      console.log('finalDate:', finalDate);

      $this.countdown(finalDate, function(event) {
        console.log('strftime output:', event.strftime('%D days %H:%M:%S'));

        $this.html(event.strftime('%D days %H:%M:%S'));
      });
    });
  </script>

Answer 2

Solved the problem.

It was easier then anyone can though of, and obvious as hell...

So firstly I put the JS code under the @endsection, so it wasn't loaded to the view. Putting the code above @endsection solved the problem, as all of the JS scripts were loaded.