Таймер обратного отсчета Hilios с Laravel 5.6

Question

Я борюсь с таймером обратного отсчета Hilios JQuery, установленным вдоль laravel 5.6

У меня есть div с сгенерированным значением, которое выглядит как показано ниже:

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

Ирезультат, когда генерируемый выглядит так:

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

Итак, в нижней части файла представления, я реализовал jQuery со скриптом обратного отсчета:

<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>

Проблема в том, что это не такработает вообще, и что еще хуже - я не получаю никаких ошибок в консоли ...

Заранее благодарен за любые предложения, которые могут помочь с этой проблемой.

Answer 1

Решил проблему.

Это было легче, чем кто-либо, хотя и очевидно, как черт ...

Итак, во-первых, я поместил код JS под @endsection, так чтоне был загружен для просмотра.Размещение кода выше @endsection решило проблему, так как все скрипты JS были загружены.

Answer 2

В случае, если ваш код работает правильно отдельно (например, в jsfiddle), попробуйте ошибки и ошибки или некоторые журналы консоли.

Попробуйте следующий код, проверьте правильность вывода консоли ичто ты ожидалЕсли содержимое атрибутов данных правильное, я могу заподозрить некоторые проблемы с функцией event.strftime:

  <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>