Javascript - Using the timeago function with Algolia autocomplete

Question

I am trying to use the timeAgo function from these example . I put it in a file and I call it in my view as follows:

<script src="{{ asset('js/landing-page/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/landing-page/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/landing-page/material.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ asset('js/slider.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/timeago.js') }}"></script>

<!-- Include AlgoliaSearch JS Client and autocomplete.js library -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script type="text/javascript" src="{{ asset('js/autocomplete.js') }}"></script>

<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
<script src="{{ asset('js/landing-page/material-kit.js') }}" type="text/javascript"></script>

The part of the script where the Algolia autocomplete pattern is as follows:

{
      source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
      displayKey: 'title',
      templates: {
        header: '<div class="aa-suggestions-category">Videos</div>',
        suggestion: function(suggestion) {
          return '<span>'
                + '<a href="/player/' + suggestion.id + '">'
                +   '<div class="media">'
                +     '<div class="media-left">'
                +       '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/myUrl/' + suggestion.video_id + '_1.jpg">'
                +     '</div>'
                +     '<div class="media-body">'
                +       '<p>' + suggestion._highlightResult.title.value + '<small><abbr class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</abbr></small>' + '</p>'
                +       '<small> ' + '</small>'
                +     '</div>'
                +   '</div>'
                + '</a>'
                +'</span>';
        }

But the timestamp is still visible, not a time ago. The console does not display errors. What am I doing wrong?

Answer 1

Autocomplete adds html code long after the DOM is ready, so the code timeago.jsis executed when the autocomplete code does not exist yet.

timeAgo autocomplete:updated, 60 10 .

//attach custom event handler - autocomplete:updated triggers when dataset is rendered
autocomplete('#search-input', { hint: false }, [
    {
      source: ...,
      displayKey: ...,
      templates: {
        suggestion: function(suggestion) {
          ...
        }
      }
    }
  ]).on('autocomplete:updated', function(event, suggestion, dataset) {
    timeAgo('.timeago');
  });

timeAgo javascript. timeAgoTimeout = setTimeout(timeAgo, 60000); clearTimeout(timeAgoTimeout) timeAgo.

, , - http://jsfiddle.net/mge45ugr/

Answer 2

timeago

<abbr class="timeago">

, . "onload" JQuery ajax html-.

Answer 3

, , , DOM, . 60 , , timeago 60 .

, , timeago , . Algolia , DOM ( ), timeago. , timeago .

timeago, timeago. , , , , DOM. , , , . , :

// update time every 10 seconds
setTimeout(timeAgo, 10000);

, .

http://jsfiddle.net/mspinks/hkvjkbd0/2/

, . 10 . 5 DOM ( class=timeago). 5 , .

, , timeago , DOM.